raft-ui 0.0.1

package/src/components/panel-header/panel-header.tsx

@@ -0,0 +1,199 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const panelHeader = tv({
+  slots: {
+    root: ["flex h-[62px] items-center gap-3 px-5", "[@media(max-height:600px)]:h-12"],
+    icon: [
+      "hidden size-9 shrink-0 items-center justify-center border-2 md:flex",
+      "[&_svg]:size-[18px]",
+    ],
+    visual: ["hidden shrink-0 md:flex"],
+    content: ["min-w-0 flex-1"],
+    titleRow: ["flex min-w-0 items-center gap-2"],
+    title: ["truncate text-base font-bold leading-tight"],
+    suffix: ["shrink-0"],
+    subtitle: ["truncate font-mono text-xs"],
+    actions: ["flex shrink-0 items-center gap-1.5"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: "border-b-2 border-line-strong bg-layer-panel",
+        icon: "border-line-strong",
+        title: "text-foreground-strong",
+        subtitle: "text-foreground/50",
+      },
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+  },
+});
+
+export type PanelHeaderProps = useRender.ComponentProps<"div">;
+
+export function PanelHeader({ className, render, ...props }: PanelHeaderProps) {
+  const theme = useThemeFamily();
+  const { root } = panelHeader({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header",
+    },
+  });
+}
+
+export type PanelHeaderIconProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderIcon({ className, render, ...props }: PanelHeaderIconProps) {
+  const theme = useThemeFamily();
+  const { icon } = panelHeader({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: icon({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-icon",
+    },
+  });
+}
+
+export type PanelHeaderVisualProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderVisual({ className, render, ...props }: PanelHeaderVisualProps) {
+  const { visual } = panelHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: visual({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-visual",
+    },
+  });
+}
+
+export type PanelHeaderContentProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderContent({ className, render, ...props }: PanelHeaderContentProps) {
+  const { content } = panelHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: content({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-content",
+    },
+  });
+}
+
+export type PanelHeaderTitleRowProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderTitleRow({ className, render, ...props }: PanelHeaderTitleRowProps) {
+  const { titleRow } = panelHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: titleRow({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-title-row",
+    },
+  });
+}
+
+export type PanelHeaderTitleProps = useRender.ComponentProps<"h2">;
+
+export function PanelHeaderTitle({ className, render, ...props }: PanelHeaderTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = panelHeader({ theme });
+  const defaultProps: useRender.ElementProps<"h2"> = {
+    className: title({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "h2",
+    render,
+    props: mergeProps<"h2">(defaultProps, props),
+    state: {
+      slot: "panel-header-title",
+    },
+  });
+}
+
+export type PanelHeaderSuffixProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderSuffix({ className, render, ...props }: PanelHeaderSuffixProps) {
+  const { suffix } = panelHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: suffix({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-suffix",
+    },
+  });
+}
+
+export type PanelHeaderSubtitleProps = useRender.ComponentProps<"p">;
+
+export function PanelHeaderSubtitle({ className, render, ...props }: PanelHeaderSubtitleProps) {
+  const theme = useThemeFamily();
+  const { subtitle } = panelHeader({ theme });
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: subtitle({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">(defaultProps, props),
+    state: {
+      slot: "panel-header-subtitle",
+    },
+  });
+}
+
+export type PanelHeaderActionsProps = useRender.ComponentProps<"div">;
+
+export function PanelHeaderActions({ className, render, ...props }: PanelHeaderActionsProps) {
+  const { actions } = panelHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: actions({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "panel-header-actions",
+    },
+  });
+}

package/src/components/popover/index.ts

@@ -0,0 +1,30 @@
+export {
+  Popover,
+  PopoverArrow,
+  PopoverBackdrop,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverPortal,
+  PopoverPopup,
+  PopoverSeparator,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverViewport,
+} from "./popover.tsx";
+export type {
+  PopoverArrowProps,
+  PopoverBackdropProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverDescriptionProps,
+  PopoverHeaderProps,
+  PopoverPortalProps,
+  PopoverProps,
+  PopoverPopupProps,
+  PopoverSeparatorProps,
+  PopoverTitleProps,
+  PopoverTriggerProps,
+  PopoverViewportProps,
+} from "./popover.tsx";

package/src/components/popover/popover.tsx

@@ -0,0 +1,248 @@
+import type { ComponentPropsWithRef } from "react";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { tv } from "../../lib/tv.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const popover = tv({
+  slots: {
+    trigger: ["select-none"],
+    positioner: ["isolate z-50 outline-none"],
+    content: [
+      "max-h-[var(--available-height)] min-w-[220px] overflow-hidden bg-layer-panel",
+      "outline-none",
+    ],
+    header: ["flex items-center justify-between px-3 py-2"],
+    separator: ["border-t"],
+    title: ["m-0 text-[10px] font-bold leading-none"],
+    description: ["m-0 text-xs leading-5"],
+    close: [
+      "inline-flex items-center justify-center",
+      "text-[10px] font-bold",
+      "outline-none transition-colors",
+    ],
+    arrow: ["size-2 rotate-45"],
+    backdrop: ["fixed inset-0"],
+    viewport: ["block"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        content: ["border-2 border-black bg-white shadow-lg"],
+        separator: ["border-black"],
+        title: ["font-sans uppercase tracking-wide text-black/60"],
+        description: ["font-sans text-black"],
+        close: ["font-sans uppercase tracking-wide text-black/60 hover:text-black"],
+        arrow: ["border-l-2 border-t-2 border-black bg-white"],
+        backdrop: ["bg-transparent"],
+      },
+      elegant: {
+        content: ["rounded-md bg-layer-popover", "shadow-xl"],
+        separator: ["border-line-muted"],
+        title: ["text-[11px] font-medium tracking-[-0.005em] text-foreground/45"],
+        description: ["text-xs leading-5 text-foreground-muted"],
+        close: [
+          "text-[11px] font-medium tracking-[-0.005em]",
+          "text-foreground-muted transition-colors duration-150 hover:text-foreground-strong",
+        ],
+        arrow: ["border-l border-t border-line-muted bg-layer-popover"],
+        backdrop: ["bg-black/20"],
+      },
+    },
+  },
+});
+
+export type PopoverProps = BasePopover.Root.Props;
+
+export function Popover(props: PopoverProps) {
+  return <BasePopover.Root data-slot="popover" {...props} />;
+}
+
+export type PopoverTriggerProps = StyledProps<BasePopover.Trigger.Props>;
+
+export function PopoverTrigger({ className, ...props }: PopoverTriggerProps) {
+  const theme = useThemeFamily();
+  const { trigger } = popover({ theme });
+  return (
+    <BasePopover.Trigger
+      data-slot="popover-trigger"
+      className={trigger({ className })}
+      {...props}
+    />
+  );
+}
+
+export type PopoverPortalProps = BasePopover.Portal.Props;
+
+export function PopoverPortal(props: PopoverPortalProps) {
+  return <BasePopover.Portal data-slot="popover-portal" {...props} />;
+}
+
+export type PopoverPopupProps = ComponentPropsWithRef<"div">;
+
+export function PopoverPopup({ className, ...props }: PopoverPopupProps) {
+  const theme = useThemeFamily();
+  const { content } = popover({ theme });
+  return <div data-slot="popover-content" className={content({ className })} {...props} />;
+}
+
+export type PopoverContentProps = StyledProps<BasePopover.Popup.Props> &
+  Pick<
+    BasePopover.Positioner.Props,
+    | "align"
+    | "alignOffset"
+    | "anchor"
+    | "arrowPadding"
+    | "collisionAvoidance"
+    | "collisionBoundary"
+    | "collisionPadding"
+    | "disableAnchorTracking"
+    | "positionMethod"
+    | "side"
+    | "sideOffset"
+    | "sticky"
+  > & {
+    portalProps?: PopoverPortalProps;
+  };
+
+export function PopoverContent({
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  disableAnchorTracking = true,
+  positionMethod = "fixed",
+  side = "bottom",
+  sideOffset = 4,
+  sticky,
+  portalProps,
+  className,
+  ...props
+}: PopoverContentProps) {
+  const theme = useThemeFamily();
+  const { positioner, content } = popover({ theme });
+  return (
+    <BasePopover.Portal {...portalProps}>
+      <BasePopover.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        arrowPadding={arrowPadding}
+        collisionAvoidance={collisionAvoidance}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        disableAnchorTracking={disableAnchorTracking}
+        positionMethod={positionMethod}
+        side={side}
+        sideOffset={sideOffset}
+        sticky={sticky}
+        className={positioner()}
+      >
+        <BasePopover.Popup
+          data-slot="popover-content"
+          className={content({ className })}
+          {...props}
+        />
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}
+
+export type PopoverViewportProps = StyledProps<BasePopover.Viewport.Props>;
+
+export function PopoverViewport({ className, ...props }: PopoverViewportProps) {
+  const theme = useThemeFamily();
+  const { viewport } = popover({ theme });
+  return (
+    <BasePopover.Viewport
+      data-slot="popover-viewport"
+      className={viewport({ className })}
+      {...props}
+    />
+  );
+}
+
+export type PopoverHeaderProps = ComponentPropsWithRef<"div">;
+
+export function PopoverHeader({ className, ...props }: PopoverHeaderProps) {
+  const theme = useThemeFamily();
+  const { header } = popover({ theme });
+  return <div data-slot="popover-header" className={header({ className })} {...props} />;
+}
+
+export type PopoverSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+
+export function PopoverSeparator({ className, ...props }: PopoverSeparatorProps) {
+  const theme = useThemeFamily();
+  const { separator } = popover({ theme });
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      data-slot="popover-separator"
+      className={separator({ className })}
+      {...props}
+    />
+  );
+}
+
+export type PopoverTitleProps = StyledProps<BasePopover.Title.Props>;
+
+export function PopoverTitle({ className, ...props }: PopoverTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = popover({ theme });
+  return (
+    <BasePopover.Title data-slot="popover-title" className={title({ className })} {...props} />
+  );
+}
+
+export type PopoverDescriptionProps = StyledProps<BasePopover.Description.Props>;
+
+export function PopoverDescription({ className, ...props }: PopoverDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = popover({ theme });
+  return (
+    <BasePopover.Description
+      data-slot="popover-description"
+      className={description({ className })}
+      {...props}
+    />
+  );
+}
+
+export type PopoverCloseProps = StyledProps<BasePopover.Close.Props>;
+
+export function PopoverClose({ className, ...props }: PopoverCloseProps) {
+  const theme = useThemeFamily();
+  const { close } = popover({ theme });
+  return (
+    <BasePopover.Close data-slot="popover-close" className={close({ className })} {...props} />
+  );
+}
+
+export type PopoverArrowProps = StyledProps<BasePopover.Arrow.Props>;
+
+export function PopoverArrow({ className, ...props }: PopoverArrowProps) {
+  const theme = useThemeFamily();
+  const { arrow } = popover({ theme });
+  return (
+    <BasePopover.Arrow data-slot="popover-arrow" className={arrow({ className })} {...props} />
+  );
+}
+
+export type PopoverBackdropProps = StyledProps<BasePopover.Backdrop.Props>;
+
+export function PopoverBackdrop({ className, ...props }: PopoverBackdropProps) {
+  const theme = useThemeFamily();
+  const { backdrop } = popover({ theme });
+  return (
+    <BasePopover.Backdrop
+      data-slot="popover-backdrop"
+      className={backdrop({ className })}
+      {...props}
+    />
+  );
+}

package/src/components/preview-shell/index.ts

@@ -0,0 +1,2 @@
+export { PreviewShell } from "./preview-shell.tsx";
+export type { PreviewShellProps } from "./preview-shell.tsx";

package/src/components/preview-shell/preview-shell.tsx

@@ -0,0 +1,51 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const previewShell = tv({
+  slots: {
+    root: [],
+  },
+  variants: {
+    theme: {
+      brutal: {},
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+    variant: {
+      default: {
+        root: "border border-line-muted bg-layer-panel hover:border-line-subtle hover:bg-layer-muted",
+      },
+      muted: {
+        root: "border-2 border-line-subtle bg-layer-muted italic text-foreground/40 hover:shadow-sm",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export type PreviewShellProps = useRender.ComponentProps<"div"> &
+  Omit<VariantProps<typeof previewShell>, "theme"> & {
+    "data-testid"?: string;
+  };
+
+export function PreviewShell({ variant, className, render, ...props }: PreviewShellProps) {
+  const theme = useThemeFamily();
+  const { root } = previewShell({ theme, variant });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "preview-shell",
+      variant,
+    },
+  });
+}

package/src/components/quoted-message-card/index.ts

@@ -0,0 +1,36 @@
+export {
+  QuotedMessageCard,
+  QuotedMessageCardAttachments,
+  QuotedMessageCardAuthor,
+  QuotedMessageCardAuthorName,
+  QuotedMessageCardAuthorSubtitle,
+  QuotedMessageCardBody,
+  QuotedMessageCardChannel,
+  QuotedMessageCardContent,
+  QuotedMessageCardContentWrap,
+  QuotedMessageCardHeader,
+  QuotedMessageCardMeta,
+  QuotedMessageCardSeparator,
+  QuotedMessageCardTag,
+  QuotedMessageCardThread,
+  QuotedMessageCardTimestamp,
+  QuotedMessageCardUnavailable,
+} from "./quoted-message-card.tsx";
+export type {
+  QuotedMessageCardAttachmentsProps,
+  QuotedMessageCardAuthorNameProps,
+  QuotedMessageCardAuthorProps,
+  QuotedMessageCardAuthorSubtitleProps,
+  QuotedMessageCardBodyProps,
+  QuotedMessageCardChannelProps,
+  QuotedMessageCardContentProps,
+  QuotedMessageCardContentWrapProps,
+  QuotedMessageCardHeaderProps,
+  QuotedMessageCardMetaProps,
+  QuotedMessageCardProps,
+  QuotedMessageCardSeparatorProps,
+  QuotedMessageCardTagProps,
+  QuotedMessageCardThreadProps,
+  QuotedMessageCardTimestampProps,
+  QuotedMessageCardUnavailableProps,
+} from "./quoted-message-card.tsx";