@borisj74/bv-ds 0.1.0 → 0.1.2

package/src/components/Button/Button.tsx

@@ -15,32 +15,44 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
 }
 
-// NOTE: this is a placeholder implementation to verify the build/Storybook
-// pipeline end-to-end. The figma-to-react skill should overwrite this with
-// the full per-hierarchy/per-size token mapping from design.md §3 (all 5
-// sizes, all 5 hierarchies, skeuomorphic shadow stack on Primary/Secondary).
+// Token class names use the doubled-prefix form that matches the nested
+// tailwind-preset.js color groups (v0.1.2+):
+//   colors.bg["brand-solid"]  → bg-bg-brand-solid
+//   colors.text["secondary"]  → text-text-secondary
+//   colors.border["primary"]  → border-border-primary
 //
-// Padding values below use Tailwind arbitrary values ([14px], [10px], etc)
-// rather than the spacing-* scale on purpose — design.md §3 confirms the
-// real Figma component uses raw px at md/lg/xl, not the nearest token.
-// Don't "fix" these to spacing-md/spacing-lg; that would silently diverge
-// from the source design.
+// Padding values use Tailwind arbitrary values ([14px], [10px], etc) rather
+// than the spacing-* scale — design.md §3 confirms the real Figma component
+// uses raw px at certain sizes. Don't "fix" these to spacing tokens; that
+// would silently diverge from the source design.
+//
+// Primary/Secondary use the skeuomorphic shadow stack confirmed in design.md:
+//   shadow-xs outer + inner border highlight + inner bottom shading.
 
 const hierarchyClasses: Record<ButtonHierarchy, string> = {
   Primary:
-    "bg-brand-solid text-white border-2 border-white/[0.12] hover:bg-bg-brand-solid-hover",
-  Secondary: "bg-bg-primary text-text-secondary border border-border-primary",
-  Tertiary: "bg-transparent text-text-tertiary border-0",
-  "Link color": "bg-transparent text-text-brand-secondary border-0 p-0",
-  "Link gray": "bg-transparent text-text-tertiary border-0 p-0",
+    "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic " +
+    "hover:bg-bg-brand-solid-hover",
+  Secondary:
+    "bg-bg-primary text-text-secondary border border-border-border-primary shadow-skeuomorphic " +
+    "hover:bg-bg-primary-hover",
+  Tertiary:
+    "bg-transparent text-text-tertiary border-0 " +
+    "hover:bg-bg-secondary",
+  "Link color":
+    "bg-transparent text-text-brand-secondary border-0 p-0 " +
+    "hover:text-text-brand-secondary-hover",
+  "Link gray":
+    "bg-transparent text-text-tertiary border-0 p-0 " +
+    "hover:text-text-tertiary-hover",
 };
 
 const sizeClasses: Record<ButtonSize, string> = {
-  xs: "px-[10px] py-sm text-xs",
-  sm: "px-lg py-md text-xs",
-  md: "px-[14px] py-[10px] text-sm",
-  lg: "px-xl py-[10px] text-md",
-  xl: "px-[18px] py-lg text-md",
+  xs: "px-[10px] py-sm gap-xs text-xs font-semibold",
+  sm: "px-lg py-md gap-xs text-xs font-semibold",
+  md: "px-[14px] py-[10px] gap-xs text-sm font-semibold",
+  lg: "px-xl py-[10px] gap-sm text-md font-semibold",
+  xl: "px-[18px] py-lg gap-sm text-md font-semibold",
 };
 
 export function Button({
@@ -55,8 +67,10 @@ export function Button({
   return (
     <button
       className={clsx(
-        "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "inline-flex items-center justify-center font-body rounded-md",
+        "cursor-pointer transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
         hierarchyClasses[hierarchy],
         sizeClasses[size],
         className,
@@ -65,7 +79,13 @@ export function Button({
       aria-disabled={disabled || loading}
       {...rest}
     >
-      {loading ? "Loading…" : children}
+      {loading ? (
+        <span className="opacity-70">Loading…</span>
+      ) : (
+        children
+      )}
     </button>
   );
 }
+
+export default Button;

package/src/components/ButtonDestructive/ButtonDestructive.tsx

@@ -20,9 +20,9 @@ export interface ButtonDestructiveProps
 // error ring (border-error).
 const hierarchyClasses: Record<ButtonDestructiveHierarchy, string> = {
   Primary:
-    "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
+    "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
   Secondary:
-    "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+    "bg-bg-primary text-text-error-primary border border-border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary:
     "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
   Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary",
@@ -51,7 +51,7 @@ export function ButtonDestructive({
     <button
       className={clsx(
         "font-body font-semibold rounded-md cursor-pointer transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-bg-primary",
         "disabled:opacity-50 disabled:cursor-not-allowed",
         hierarchyClasses[hierarchy],
         hierarchy === "Link" ? "" : sizeClasses[size],

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,111 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { ModalHeader } from "../ModalHeader";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Controls visibility — renders nothing when false. */
+  open: boolean;
+  /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+  onClose: () => void;
+  /** Panel max-width: sm=400 / md=560 / lg=720 / xl=960 px. Full width on mobile. */
+  size?: ModalSize;
+  /** Modal contents — compose `ModalHeader`, a body, and `ModalActions` here. */
+  children: ReactNode;
+}
+
+const sizeMaxWidth: Record<ModalSize, string> = {
+  sm: "max-w-[400px]",
+  md: "max-w-[560px]",
+  lg: "max-w-[720px]",
+  xl: "max-w-[960px]",
+};
+
+/**
+ * Modal shell — fixed backdrop + centred panel. Layout/overlay only: it does NOT
+ * render a header or footer, those are composed as children (`ModalHeader` /
+ * `ModalActions`). Backdrop click-outside and Escape both call `onClose`; clicks
+ * inside the panel are stopped from bubbling. On open, focus moves into the panel
+ * and is restored to the previously-focused element on close. If a direct
+ * `ModalHeader` child is present its title is wired to `aria-labelledby`.
+ * Renders `null` while `open` is false.
+ */
+export function Modal({
+  open,
+  onClose,
+  size = "md",
+  children,
+  className,
+  ...rest
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+
+  // Escape-to-close + focus management. Hooks run before the early return below.
+  useEffect(() => {
+    if (!open) return;
+
+    previousFocusRef.current = document.activeElement as HTMLElement | null;
+    panelRef.current?.focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handlePanelClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  // Wire aria-labelledby to a ModalHeader title if one is a direct child.
+  let hasLabelledHeader = false;
+  const labelledChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && child.type === ModalHeader) {
+      hasLabelledHeader = true;
+      return cloneElement(child as React.ReactElement<{ titleId?: string }>, { titleId });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay/70 backdrop-blur-sm"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={hasLabelledHeader ? titleId : undefined}
+        tabIndex={-1}
+        onClick={handlePanelClick}
+        className={clsx(
+          "mx-4 flex w-full flex-col overflow-hidden rounded-2xl bg-bg-primary shadow-xl outline-none sm:mx-0",
+          sizeMaxWidth[size],
+          className,
+        )}
+        {...rest}
+      >
+        {labelledChildren}
+      </div>
+    </div>
+  );
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps, ModalSize } from "./Modal";

package/src/components/ModalHeader/ModalHeader.tsx

@@ -19,6 +19,8 @@ export interface ModalHeaderProps
   divider?: boolean;
   /** Renders an x-close button top-right when provided. */
   onClose?: () => void;
+  /** id placed on the title element so a parent `Modal` can wire `aria-labelledby`. */
+  titleId?: string;
 }
 
 const FeaturedIcon = ({ children }: { children: ReactNode }) => (
@@ -45,6 +47,7 @@ export function ModalHeader({
   type = "left",
   divider = true,
   onClose,
+  titleId,
   className,
   ...rest
 }: ModalHeaderProps) {
@@ -75,7 +78,7 @@ export function ModalHeader({
             isCenter && "items-center text-center",
           )}
         >
-          <p className="w-full text-md font-semibold text-text-primary">{title}</p>
+          <p id={titleId} className="w-full text-md font-semibold text-text-primary">{title}</p>
           {description && (
             <p className="w-full text-sm text-text-tertiary">{description}</p>
           )}

package/src/components/NavAccountCard/NavAccountCard.tsx

@@ -2,6 +2,7 @@ import { type HTMLAttributes, type ReactNode } from "react";
 import clsx from "clsx";
 
 export type NavAccountCardVariant = "simple" | "card";
+export type NavAccountCardBreakpoint = "desktop" | "mobile";
 
 export interface NavAccountCardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
@@ -9,7 +10,14 @@ export interface NavAccountCardProps
   variant?: NavAccountCardVariant;
   /** card only — whether the dropdown menu is shown. */
   open?: boolean;
+  /** Width: `desktop` = 280px · `mobile` = 256px. */
+  breakpoint?: NavAccountCardBreakpoint;
+  /** Custom avatar node — takes precedence over the built-in `src` treatment. */
   avatar?: ReactNode;
+  /** Image URL for the built-in layered avatar (used when `avatar` is not supplied). */
+  src?: string;
+  /** Status dot on the built-in avatar — `true` online (green) · `false` offline (gray) · omit for none. */
+  online?: boolean;
   name?: ReactNode;
   email?: ReactNode;
   /** card only — toggles the dropdown (fires on trigger click). */
@@ -41,6 +49,28 @@ const LogOut = () => (
   </svg>
 );
 
+/**
+ * Layered avatar treatment from Figma (node 7891:87996): white outer ring +
+ * inner hairline border + status dot. `border-[rgba(0,0,0,0.16)]` is a one-off
+ * value (no matching token) per the Figma spec. Used when `src` is supplied and
+ * no `avatar` slot is given.
+ */
+const LayeredAvatar = ({ src, online }: { src?: string; online?: boolean }) => (
+  <span className="relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs">
+    <span className="flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]">
+      <img src={src} alt="" className="size-full rounded-full object-cover" />
+    </span>
+    {online !== undefined && (
+      <span
+        className={clsx(
+          "absolute bottom-[-2px] right-[-2px] size-[14px] rounded-full border-[1.5px] border-bg-primary",
+          online ? "bg-fg-success-secondary" : "bg-utility-neutral-300",
+        )}
+      />
+    )}
+  </span>
+);
+
 const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: ReactNode; email?: ReactNode }) => (
   <div className="flex min-w-0 flex-1 items-center gap-md">
     {avatar && <span className="shrink-0">{avatar}</span>}
@@ -65,7 +95,10 @@ const AvatarLabel = ({ avatar, name, email }: { avatar?: ReactNode; name?: React
 export function NavAccountCard({
   variant = "card",
   open = false,
+  breakpoint = "desktop",
   avatar,
+  src,
+  online,
   name,
   email,
   onToggle,
@@ -74,16 +107,20 @@ export function NavAccountCard({
   className,
   ...rest
 }: NavAccountCardProps) {
+  const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
+  const avatarNode = avatar ?? (src !== undefined ? <LayeredAvatar src={src} online={online} /> : undefined);
+
   if (variant === "simple") {
     return (
       <div
         className={clsx(
-          "relative flex w-[280px] items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          "relative flex items-start gap-xl border-t border-border-secondary px-md pt-2xl",
+          widthClass,
           className,
         )}
         {...rest}
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <button
           type="button"
           onClick={onSignOut}
@@ -97,13 +134,13 @@ export function NavAccountCard({
   }
 
   return (
-    <div className={clsx("relative w-[280px]", className)} {...rest}>
+    <div className={clsx("relative", widthClass, className)} {...rest}>
       <button
         type="button"
         onClick={onToggle}
         className="relative flex w-full items-start gap-xl rounded-xl border border-border-secondary bg-bg-primary-alt p-lg text-left shadow-xs"
       >
-        <AvatarLabel avatar={avatar} name={name} email={email} />
+        <AvatarLabel avatar={avatarNode} name={name} email={email} />
         <span
           className={clsx(
             "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",

package/src/components/NavAccountCard/index.ts

@@ -1,2 +1,6 @@
 export { NavAccountCard } from "./NavAccountCard";
-export type { NavAccountCardProps, NavAccountCardVariant } from "./NavAccountCard";
+export type {
+  NavAccountCardProps,
+  NavAccountCardVariant,
+  NavAccountCardBreakpoint,
+} from "./NavAccountCard";

package/src/components/SidebarNavigation/SidebarNavigation.tsx

@@ -79,7 +79,7 @@ export function SidebarNavigation({
   return (
     <>
       {/* Desktop rail */}
-      <aside className="hidden h-full md:block">{rail}</aside>
+      <aside className="hidden h-full md:flex">{rail}</aside>
 
       {/* Mobile trigger + drawer */}
       <div className="md:hidden">

package/src/components/SlideoutMenu/SlideoutMenu.tsx

@@ -0,0 +1,86 @@
+import {
+  useEffect,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+
+export type SlideoutMenuSide = "right" | "left";
+export type SlideoutMenuSize = "sm" | "md" | "lg";
+
+export interface SlideoutMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Controls visibility. The panel stays mounted to animate the slide in/out. */
+  open: boolean;
+  /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+  onClose: () => void;
+  /** Edge the panel docks to and slides in from. */
+  side?: SlideoutMenuSide;
+  /** Panel width: sm=360 / md=480 / lg=600 px. Full width on mobile. */
+  size?: SlideoutMenuSize;
+  /** Drawer contents — compose `SlideOutMenuHeader`, a body, and a footer here. */
+  children: ReactNode;
+}
+
+const sizeWidth: Record<SlideoutMenuSize, string> = {
+  sm: "sm:w-[360px]",
+  md: "sm:w-[480px]",
+  lg: "sm:w-[600px]",
+};
+
+/**
+ * Slide-out / drawer shell — fixed backdrop + edge-docked panel that slides in
+ * from `side` via a `translate-x` transition. Layout/overlay only: the header is
+ * composed as a child (`SlideOutMenuHeader`), not reimplemented. Backdrop
+ * click-outside and Escape both call `onClose`. The panel stays mounted (toggled
+ * via transform + the backdrop's pointer-events) so both enter and exit animate.
+ */
+export function SlideoutMenu({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  children,
+  className,
+  ...rest
+}: SlideoutMenuProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+
+  const handlePanelClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  const closedTransform = side === "right" ? "translate-x-full" : "-translate-x-full";
+
+  return (
+    <div
+      onClick={onClose}
+      aria-hidden={!open}
+      className={clsx(
+        "fixed inset-0 z-50 bg-bg-overlay/70 backdrop-blur-sm transition-opacity duration-300",
+        open ? "opacity-100" : "pointer-events-none opacity-0",
+      )}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        onClick={handlePanelClick}
+        className={clsx(
+          "fixed bottom-0 top-0 flex w-full flex-col bg-bg-primary shadow-xl transition-transform duration-300 ease-in-out",
+          side === "right" ? "right-0" : "left-0",
+          sizeWidth[size],
+          open ? "translate-x-0" : closedTransform,
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/SlideoutMenu/index.ts

@@ -0,0 +1,2 @@
+export { SlideoutMenu } from "./SlideoutMenu";
+export type { SlideoutMenuProps, SlideoutMenuSide, SlideoutMenuSize } from "./SlideoutMenu";

package/src/index.ts

@@ -86,6 +86,7 @@ export * from "./components/MessageActionPanel";
 export * from "./components/MessageReaction";
 export * from "./components/MessageStatusIcon";
 export * from "./components/MetricItem";
+export * from "./components/Modal";
 export * from "./components/ModalActions";
 export * from "./components/ModalHeader";
 export * from "./components/MultiSelect";
@@ -121,6 +122,7 @@ export * from "./components/Select";
 export * from "./components/SelectMenuItem";
 export * from "./components/SidebarNavigation";
 export * from "./components/SlideOutMenuHeader";
+export * from "./components/SlideoutMenu";
 export * from "./components/Slider";
 export * from "./components/SocialButton";
 export * from "./components/StatusIcon";