raft-ui 0.0.5 → 0.0.7

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

@@ -1,199 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,248 +0,0 @@
-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

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

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

@@ -1,51 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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";