sid-ui 0.0.0-stage → 0.1.1

package/src/components/MessageList.tsx

@@ -0,0 +1,80 @@
+import { Badge, type BadgeVariant } from "./Feedback";
+
+import type { ReactNode } from "react";
+
+export type MessageListItem = {
+  id: string;
+  sender: string;
+  subject: string;
+  /** The first line of the body, shown after the subject in secondary ink. */
+  snippet?: string;
+  /** Already formatted, e.g. "1:19 PM" or "Oct 2". */
+  time: string;
+  isUnread?: boolean;
+  tag?: { label: string; variant?: BadgeVariant };
+};
+
+/**
+ * Mail as one line per message: an unread dot, the sender, the subject with its first
+ * line, a label, and the time. Rows stack to two lines in a narrow container. A heading
+ * such as "Unread" or "Read" can sit above each group.
+ */
+export function MessageList({
+  items,
+  label,
+  heading,
+  icon,
+  selectedId,
+  onSelect,
+  empty = "No messages.",
+}: {
+  items: MessageListItem[];
+  /** Accessible name for the list. */
+  label: string;
+  /** A group title above the rows, with its count. */
+  heading?: string;
+  icon?: ReactNode;
+  selectedId?: string | null;
+  onSelect?: (id: string) => void;
+  empty?: ReactNode;
+}) {
+  return (
+    <section className="os-mail">
+      {heading ? (
+        <header className="os-mail-heading">
+          {icon ? <span className="os-mail-heading-icon">{icon}</span> : null}
+          <span>{heading}</span>
+          <span className="os-mail-count">{items.length}</span>
+        </header>
+      ) : null}
+      {items.length === 0 ? (
+        <p className="os-mail-empty">{empty}</p>
+      ) : (
+        <ul className="os-mail-list" aria-label={label}>
+          {items.map((item) => (
+            <li key={item.id}>
+              <button
+                type="button"
+                className="os-mail-row"
+                data-unread={item.isUnread || undefined}
+                aria-current={selectedId === item.id || undefined}
+                onClick={() => onSelect?.(item.id)}
+              >
+                <span className="os-mail-dot" aria-label={item.isUnread ? "Unread" : undefined} />
+                <span className="os-mail-sender">{item.sender}</span>
+                <span className="os-mail-text">
+                  <span className="os-mail-subject">{item.subject}</span>
+                  {item.snippet ? <span className="os-mail-snippet"> — {item.snippet}</span> : null}
+                </span>
+                <span className="os-mail-tag">
+                  {item.tag ? <Badge label={item.tag.label} variant={item.tag.variant} /> : null}
+                </span>
+                <span className="os-mail-time">{item.time}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/components/Nav.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { BRAND_NAME, BrandHeading } from "../brand";
+
+import { Button } from "./Action";
+import { Avatar } from "./Content";
+import { TopNav, TopNavItem } from "./LayoutPrimitives";
+
+import type { ReactNode } from "react";
+
+export interface NavItem {
+  label: string;
+  active?: boolean;
+  href?: string;
+}
+
+export interface NavProps {
+  /** Product name. The bare brand renders as the wordmark; a sub-product gets the app icon and its name. */
+  brand?: string;
+  items?: NavItem[];
+  cta?: string;
+  onCtaClick?: () => void;
+  /** The signed-in person; the avatar derives initials from it. */
+  userName?: string;
+  /** Optional route for the signed-in person's profile. */
+  userHref?: string;
+  trailing?: ReactNode;
+  showAvatar?: boolean;
+}
+
+/** The Joined product bar — an Astryx TopNav with one primary action and the signed-in person. */
+export function Nav({
+  brand = BRAND_NAME,
+  items = [],
+  cta,
+  onCtaClick,
+  userName = "Jordan Miles",
+  userHref,
+  trailing,
+  showAvatar = false,
+}: NavProps) {
+  return (
+    <TopNav
+      label={brand}
+      heading={<BrandHeading product={brand} />}
+      startContent={
+        <>
+          {items.map((item) => (
+            <TopNavItem
+              key={item.label}
+              label={item.label}
+              href={item.href ?? "#"}
+              isSelected={item.active}
+            />
+          ))}
+        </>
+      }
+      endContent={
+        <>
+          {cta && <Button label={cta} variant="primary" size="sm" onClick={onCtaClick} />}
+          {trailing}
+          {showAvatar && (
+            <Avatar name={userName} alt={`${userName} profile`} href={userHref} size="sm" />
+          )}
+        </>
+      }
+    />
+  );
+}

package/src/components/Navigation.tsx

@@ -0,0 +1,52 @@
+/**
+ * Navigation components are original Astryx — Joined only themes them.
+ * TopNav and SideNav live in ./LayoutPrimitives; Nav composes TopNav.
+ */
+export {
+  Breadcrumbs,
+  BreadcrumbItem,
+  BreadcrumbMenuItem,
+  BreadcrumbMenuDivider,
+} from "@astryxdesign/core/Breadcrumbs";
+export type {
+  BreadcrumbsProps,
+  BreadcrumbsVariant,
+  BreadcrumbItemProps,
+} from "@astryxdesign/core/Breadcrumbs";
+
+export { Pagination, generatePageRange } from "@astryxdesign/core/Pagination";
+export type {
+  PaginationProps,
+  PaginationVariant,
+  PaginationSize,
+} from "@astryxdesign/core/Pagination";
+
+export { Stepper, Step } from "@astryxdesign/core/Stepper";
+export type {
+  StepperProps,
+  StepProps,
+  StepStatus,
+  StepperOrientation,
+  StepperCollapsedVariant,
+} from "@astryxdesign/core/Stepper";
+
+export { TabList, Tab, TabMenu } from "@astryxdesign/core/TabList";
+export type {
+  TabListProps,
+  TabProps,
+  TabMenuProps,
+  TabMenuOption,
+  TabListSize,
+  TabListOverflow,
+} from "@astryxdesign/core/TabList";
+
+export { Outline, parseOutlineFromMarkdown } from "@astryxdesign/core/Outline";
+export type { OutlineProps, OutlineItem } from "@astryxdesign/core/Outline";
+
+export {
+  TopNavMenu,
+  TopNavMegaMenu,
+  TopNavMegaMenuItem,
+  TopNavMegaMenuFeaturedCard,
+} from "@astryxdesign/core/TopNav";
+export type { TopNavMenuItemData } from "@astryxdesign/core/TopNav";

package/src/components/Notification.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { Glyph } from "./Glyph";
+
+import type { ReactNode } from "react";
+
+/** Accent on the unread mark. The title always says what happened. */
+export type NotificationTone = "accent" | "success" | "warning" | "danger" | "neutral";
+
+export interface NotificationProps {
+  /** Who or what this is about. */
+  title: ReactNode;
+  /** The one-line detail under the title. */
+  description?: ReactNode;
+  /** When it happened — a relative time or a short label. */
+  time?: ReactNode;
+  /** Leading visual — an avatar or an icon. */
+  start?: ReactNode;
+  /** A next step, such as a button or a link. */
+  action?: ReactNode;
+  /** Draws the unread mark. Read items stay quiet. */
+  unread?: boolean;
+  tone?: NotificationTone;
+  href?: string;
+  onClick?: () => void;
+  /** Removes the item. The button is labelled for assistive tech. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+}
+
+export interface NotificationListProps {
+  children: ReactNode;
+  /** Accessible name for the list. */
+  label?: string;
+  /** Title and actions above the list, such as “Mark all read”. */
+  header?: ReactNode;
+}
+
+/** A feed of things that happened — unread marks, times, and optional actions. */
+export function NotificationList({
+  children,
+  label = "Notifications",
+  header,
+}: NotificationListProps) {
+  return (
+    <section className="os-notes" aria-label={header ? undefined : label}>
+      {header && <div className="os-notes-header">{header}</div>}
+      <ul className="os-notes-list" aria-label={header ? label : undefined}>
+        {children}
+      </ul>
+    </section>
+  );
+}
+
+/** One item in a notification feed. Unread items announce themselves; the title carries the meaning. */
+export function Notification({
+  title,
+  description,
+  time,
+  start,
+  action,
+  unread = false,
+  tone = "accent",
+  href,
+  onClick,
+  onDismiss,
+  dismissLabel = "Dismiss",
+}: NotificationProps) {
+  const body = (
+    <>
+      <span
+        className={["os-note-mark", unread && `os-note-tone-${tone}`].filter(Boolean).join(" ")}
+        aria-hidden
+      />
+      <span className={start ? "os-note-start" : "os-note-start os-note-start-empty"}>{start}</span>
+      <span className="os-note-body">
+        <span className="os-note-title">{title}</span>
+        {description != null && <span className="os-note-description">{description}</span>}
+      </span>
+      {time != null && <span className="os-note-time">{time}</span>}
+    </>
+  );
+
+  return (
+    <li className={["os-note", unread && "os-note-unread"].filter(Boolean).join(" ")}>
+      {href ? (
+        <a className="os-note-main" href={href}>
+          {body}
+          {unread && <span className="os-sr">Unread. </span>}
+        </a>
+      ) : onClick ? (
+        <button type="button" className="os-note-main" onClick={onClick}>
+          {body}
+          {unread && <span className="os-sr">Unread. </span>}
+        </button>
+      ) : (
+        <div className="os-note-main">
+          {body}
+          {unread && <span className="os-sr">Unread. </span>}
+        </div>
+      )}
+      {action && <span className="os-note-action">{action}</span>}
+      {onDismiss && (
+        <button
+          type="button"
+          className="os-note-dismiss"
+          aria-label={dismissLabel}
+          onClick={onDismiss}
+        >
+          <Glyph name="close" />
+        </button>
+      )}
+    </li>
+  );
+}

package/src/components/NotificationTrigger.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { Glyph } from "./Glyph";
+
+import type { NotificationTone } from "./Notification";
+
+/** Where a triggered notification sits. Logical start/end mirror under RTL. */
+export type NotificationPosition = "topStart" | "topEnd" | "bottomStart" | "bottomEnd";
+
+export interface ShowNotificationOptions {
+  title: ReactNode;
+  description?: ReactNode;
+  tone?: NotificationTone;
+  /** Corner of the viewport. */
+  position?: NotificationPosition;
+  /** How long it stays. 0 keeps it until dismissed. */
+  duration?: number;
+}
+
+export type NotificationDismiss = () => void;
+
+const POSITIONS: NotificationPosition[] = ["topStart", "topEnd", "bottomStart", "bottomEnd"];
+const DEFAULT_DURATION_MS = 5000;
+const DEFAULT_POSITION: NotificationPosition = "topEnd";
+/** Matches --duration-slow, so the card finishes its exit before it unmounts. */
+const EXIT_MS = 200;
+
+interface Notice {
+  id: number;
+  title: ReactNode;
+  description?: ReactNode;
+  tone: NotificationTone;
+  position: NotificationPosition;
+  duration: number;
+  leaving: boolean;
+}
+
+function exitDelay() {
+  if (
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  )
+    return 0;
+  return EXIT_MS;
+}
+
+interface NotificationApi {
+  show: (options: ShowNotificationOptions) => NotificationDismiss;
+  dismiss: (id: number) => void;
+  items: Notice[];
+}
+
+const NotificationContext = createContext<NotificationApi | null>(null);
+
+/**
+ * Mounts the four corners. JoinedProvider includes this, so useNotification
+ * works anywhere inside it.
+ */
+export function NotificationViewport({ children }: { children: ReactNode }) {
+  const [items, setItems] = useState<Notice[]>([]);
+  const nextId = useRef(0);
+
+  const dismiss = useCallback((id: number) => {
+    setItems((all) => all.map((item) => (item.id === id ? { ...item, leaving: true } : item)));
+  }, []);
+
+  const remove = useCallback((id: number) => {
+    setItems((all) => all.filter((item) => item.id !== id));
+  }, []);
+
+  const show = useCallback(
+    (options: ShowNotificationOptions): NotificationDismiss => {
+      const id = nextId.current + 1;
+      nextId.current = id;
+      const notice: Notice = {
+        id,
+        title: options.title,
+        description: options.description,
+        tone: options.tone ?? "accent",
+        position: options.position ?? DEFAULT_POSITION,
+        duration: options.duration ?? DEFAULT_DURATION_MS,
+        leaving: false,
+      };
+      setItems((all) => [notice, ...all]);
+      return () => dismiss(id);
+    },
+    [dismiss],
+  );
+
+  return (
+    <NotificationContext.Provider value={{ show, dismiss, items }}>
+      {children}
+      <NotificationStacks items={items} onDismiss={dismiss} onRemove={remove} />
+    </NotificationContext.Provider>
+  );
+}
+
+/** Show a notification at a corner. Returns a function that dismisses it. */
+export function useNotification(): (options: ShowNotificationOptions) => NotificationDismiss {
+  const api = useContext(NotificationContext);
+  return useCallback(
+    (options: ShowNotificationOptions) => {
+      if (!api) {
+        throw new Error("useNotification must be used inside NotificationViewport");
+      }
+      return api.show(options);
+    },
+    [api],
+  );
+}
+
+function NotificationStacks({
+  items,
+  onDismiss,
+  onRemove,
+}: {
+  items: Notice[];
+  onDismiss: (id: number) => void;
+  onRemove: (id: number) => void;
+}) {
+  const layerRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    const layer = layerRef.current;
+    if (!layer || typeof layer.showPopover !== "function") return;
+    const open = items.length > 0;
+    const isOpen = layer.matches(":popover-open");
+    if (open && !isOpen) layer.showPopover();
+    if (!open && isOpen) layer.hidePopover();
+  }, [items.length]);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div ref={layerRef} popover="manual" className="os-note-layer">
+      {POSITIONS.map((position) => (
+        <NotificationStack
+          key={position}
+          position={position}
+          items={items.filter((item) => item.position === position)}
+          onDismiss={onDismiss}
+          onRemove={onRemove}
+        />
+      ))}
+    </div>,
+    document.body,
+  );
+}
+
+function NotificationStack({
+  position,
+  items,
+  onDismiss,
+  onRemove,
+}: {
+  position: NotificationPosition;
+  items: Notice[];
+  onDismiss: (id: number) => void;
+  onRemove: (id: number) => void;
+}) {
+  if (items.length === 0) return null;
+  const fromBottom = position.startsWith("bottom");
+  return (
+    <div
+      className={[
+        "os-note-stack",
+        `os-note-stack-${position}`,
+        fromBottom && "os-note-stack-reverse",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      role="region"
+      aria-label="Notifications"
+    >
+      {items.map((item) => (
+        <NotificationCard
+          key={item.id}
+          item={item}
+          onDismiss={() => onDismiss(item.id)}
+          onRemove={() => onRemove(item.id)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function NotificationCard({
+  item,
+  onDismiss,
+  onRemove,
+}: {
+  item: Notice;
+  onDismiss: () => void;
+  onRemove: () => void;
+}) {
+  const titleId = useId();
+
+  useEffect(() => {
+    if (item.duration === 0 || item.leaving) return;
+    const timer = window.setTimeout(onDismiss, item.duration);
+    return () => window.clearTimeout(timer);
+  }, [item.duration, item.leaving, onDismiss]);
+
+  useEffect(() => {
+    if (!item.leaving) return;
+    const timer = window.setTimeout(onRemove, exitDelay());
+    return () => window.clearTimeout(timer);
+  }, [item.leaving, onRemove]);
+
+  return (
+    <div
+      className={["os-note-slot", item.leaving && "os-note-slot-leaving"].filter(Boolean).join(" ")}
+    >
+      <div
+        className={`os-note-card os-note-card-${item.tone}`}
+        role={item.tone === "danger" ? "alert" : "status"}
+        aria-labelledby={titleId}
+      >
+        <span className="os-note-card-mark" aria-hidden />
+        <span className="os-note-card-copy">
+          <span className="os-note-card-title" id={titleId}>
+            {item.title}
+          </span>
+          {item.description != null && (
+            <span className="os-note-card-description">{item.description}</span>
+          )}
+        </span>
+        <button type="button" className="os-note-dismiss" aria-label="Dismiss" onClick={onDismiss}>
+          <Glyph name="close" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/Overlay.tsx

@@ -0,0 +1,50 @@
+/**
+ * Overlays are original Astryx — Joined only themes them. Tooltip lives in
+ * ./Primitives; DropdownMenu and MoreMenu live in ./Action.
+ */
+export { Dialog, DialogHeader, useImperativeDialog } from "@astryxdesign/core/Dialog";
+export type {
+  DialogProps,
+  DialogHeaderProps,
+  DialogVariant,
+  DialogPurpose,
+} from "@astryxdesign/core/Dialog";
+
+export { AlertDialog, useImperativeAlertDialog } from "@astryxdesign/core/AlertDialog";
+export type { AlertDialogProps } from "@astryxdesign/core/AlertDialog";
+
+export { BottomSheet, BottomSheetSwitcher } from "@astryxdesign/core/BottomSheet";
+export type {
+  BottomSheetProps,
+  BottomSheetHeight,
+  BottomSheetSwitcherProps,
+} from "@astryxdesign/core/BottomSheet";
+
+export { Popover, usePopover } from "@astryxdesign/core/Popover";
+export type { PopoverProps } from "@astryxdesign/core/Popover";
+
+export { HoverCard, useHoverCard } from "@astryxdesign/core/HoverCard";
+export type { HoverCardProps } from "@astryxdesign/core/HoverCard";
+
+export { useTooltip } from "@astryxdesign/core/Tooltip";
+
+export { ContextMenu, ContextMenuItem, ContextMenuDivider } from "@astryxdesign/core/ContextMenu";
+export type {
+  ContextMenuProps,
+  ContextMenuItemData,
+  ContextMenuOption,
+} from "@astryxdesign/core/ContextMenu";
+
+export {
+  CommandPalette,
+  CommandPaletteInput,
+  CommandPaletteList,
+  CommandPaletteItem,
+  CommandPaletteGroup,
+  CommandPaletteFooter,
+  CommandPaletteEmpty,
+} from "@astryxdesign/core/CommandPalette";
+export type { CommandPaletteProps } from "@astryxdesign/core/CommandPalette";
+
+export { Lightbox, useLightbox } from "@astryxdesign/core/Lightbox";
+export type { LightboxProps, LightboxMedia } from "@astryxdesign/core/Lightbox";