raft-ui 0.0.1

package/src/components/conversation-preview-card/conversation-preview-card.tsx

@@ -0,0 +1,336 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+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 conversationPreviewCard = tv({
+  slots: {
+    root: ["relative flex w-full items-start gap-3 border-2 p-3 text-left transition-colors"],
+    content: ["min-w-0 flex-1"],
+    meta: ["mb-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-xs leading-4"],
+    channel: ["font-bold"],
+    author: ["inline-flex min-w-0 items-center gap-1 font-bold"],
+    authorName: ["truncate"],
+    authorSubtitle: ["font-mono text-[10px]"],
+    timestamp: ["font-mono text-xs leading-4"],
+    preview: ["text-sm"],
+    previewLeading: ["mr-1 inline-flex align-[-1px]", "[&_svg]:size-[13px] [&_svg]:shrink-0"],
+    previewAuthor: ["font-bold"],
+    secondaryPreview: ["mt-1 line-clamp-1 text-xs"],
+    footer: ["mt-1 flex items-center gap-3"],
+    action: ["shrink-0"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: [
+          "border-line-subtle bg-layer-panel hover:border-line-strong hover:shadow-sm",
+          "data-[state=active]:border-line-strong data-[state=active]:bg-layer-panel data-[state=active]:shadow-sm",
+          "data-[highlighted=true]:border-line-strong data-[highlighted=true]:bg-info-base/25 data-[highlighted=true]:shadow-md",
+        ],
+        channel: "text-foreground/50",
+        author: "text-foreground-strong",
+        authorSubtitle: "text-foreground/40",
+        timestamp: "text-foreground/40",
+        previewAuthor: "text-foreground/70",
+        secondaryPreview: "text-foreground/45",
+      },
+      elegant: {},
+    },
+    interactive: {
+      true: {
+        root: "active:border-line-strong active:shadow-sm",
+      },
+      false: {
+        root: "cursor-default",
+      },
+    },
+  },
+  defaultVariants: {
+    interactive: false,
+  },
+});
+
+export type ConversationPreviewCardProps = useRender.ComponentProps<"button"> & {
+  testId?: string;
+};
+
+export function ConversationPreviewCard({
+  onClick,
+  className,
+  render,
+  testId,
+  ...props
+}: ConversationPreviewCardProps) {
+  const theme = useThemeFamily();
+  const interactive = Boolean(onClick);
+  const { root } = conversationPreviewCard({ theme, interactive });
+  const defaultProps: useRender.ElementProps<"button"> & {
+    "data-slot": string;
+    "data-testid"?: string;
+  } = {
+    onClick,
+    "data-slot": "conversation-preview-card",
+    "data-testid": testId,
+    className: root({ className }),
+  };
+
+  return useRender({
+    render: render ?? (interactive ? <BaseButton type="button" /> : <div />),
+    props: mergeProps<"button">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardContentProps = useRender.ComponentProps<"div">;
+
+export function ConversationPreviewCardContent({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardContentProps) {
+  const { content } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: content({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardMetaProps = useRender.ComponentProps<"div">;
+
+export function ConversationPreviewCardMeta({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardMetaProps) {
+  const { meta } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: meta({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardChannelProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardChannel({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardChannelProps) {
+  const theme = useThemeFamily();
+  const { channel } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: channel({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardAuthorProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardAuthor({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardAuthorProps) {
+  const theme = useThemeFamily();
+  const { author } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: author({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardAuthorNameProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardAuthorName({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardAuthorNameProps) {
+  const { authorName } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: authorName({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardAuthorSubtitleProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardAuthorSubtitle({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardAuthorSubtitleProps) {
+  const theme = useThemeFamily();
+  const { authorSubtitle } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: authorSubtitle({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardTimestampProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardTimestamp({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardTimestampProps) {
+  const theme = useThemeFamily();
+  const { timestamp } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: timestamp({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardPreviewProps = useRender.ComponentProps<"p">;
+
+export function ConversationPreviewCardPreview({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardPreviewProps) {
+  const { preview } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: preview({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardPreviewLeadingProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardPreviewLeading({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardPreviewLeadingProps) {
+  const { previewLeading } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: previewLeading({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardPreviewAuthorProps = useRender.ComponentProps<"span">;
+
+export function ConversationPreviewCardPreviewAuthor({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardPreviewAuthorProps) {
+  const theme = useThemeFamily();
+  const { previewAuthor } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: previewAuthor({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardSecondaryPreviewProps = useRender.ComponentProps<"p">;
+
+export function ConversationPreviewCardSecondaryPreview({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardSecondaryPreviewProps) {
+  const theme = useThemeFamily();
+  const { secondaryPreview } = conversationPreviewCard({ theme });
+  const defaultProps: useRender.ElementProps<"p"> = {
+    className: secondaryPreview({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardFooterProps = useRender.ComponentProps<"div">;
+
+export function ConversationPreviewCardFooter({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardFooterProps) {
+  const { footer } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: footer({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export type ConversationPreviewCardActionProps = useRender.ComponentProps<"div">;
+
+export function ConversationPreviewCardAction({
+  className,
+  render,
+  ...props
+}: ConversationPreviewCardActionProps) {
+  const { action } = conversationPreviewCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: action({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}

package/src/components/conversation-preview-card/index.ts

@@ -0,0 +1,32 @@
+export {
+  ConversationPreviewCard,
+  ConversationPreviewCardAction,
+  ConversationPreviewCardAuthor,
+  ConversationPreviewCardAuthorName,
+  ConversationPreviewCardAuthorSubtitle,
+  ConversationPreviewCardChannel,
+  ConversationPreviewCardContent,
+  ConversationPreviewCardFooter,
+  ConversationPreviewCardMeta,
+  ConversationPreviewCardPreview,
+  ConversationPreviewCardPreviewAuthor,
+  ConversationPreviewCardPreviewLeading,
+  ConversationPreviewCardSecondaryPreview,
+  ConversationPreviewCardTimestamp,
+} from "./conversation-preview-card.tsx";
+export type {
+  ConversationPreviewCardActionProps,
+  ConversationPreviewCardAuthorNameProps,
+  ConversationPreviewCardAuthorProps,
+  ConversationPreviewCardAuthorSubtitleProps,
+  ConversationPreviewCardChannelProps,
+  ConversationPreviewCardContentProps,
+  ConversationPreviewCardFooterProps,
+  ConversationPreviewCardMetaProps,
+  ConversationPreviewCardPreviewAuthorProps,
+  ConversationPreviewCardPreviewLeadingProps,
+  ConversationPreviewCardPreviewProps,
+  ConversationPreviewCardProps,
+  ConversationPreviewCardSecondaryPreviewProps,
+  ConversationPreviewCardTimestampProps,
+} from "./conversation-preview-card.tsx";

package/src/components/description-list/description-list.tsx

@@ -0,0 +1,116 @@
+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 descriptionList = tv({
+  slots: {
+    root: ["m-0"],
+    item: [""],
+    term: ["mb-1 flex items-center gap-2 text-xs"],
+    details: ["m-0 text-sm"],
+    action: ["inline-flex shrink-0 items-center", "[&_svg]:size-3 [&_svg]:shrink-0"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        term: "text-foreground/50",
+        details: "text-foreground-strong",
+      },
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+  },
+});
+
+export type DescriptionListProps = useRender.ComponentProps<"dl">;
+
+export function DescriptionList({ className, render, ...props }: DescriptionListProps) {
+  const { root } = descriptionList();
+  const defaultProps: useRender.ElementProps<"dl"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "dl",
+    render,
+    props: mergeProps<"dl">(defaultProps, props),
+    state: {
+      slot: "description-list",
+    },
+  });
+}
+
+export type DescriptionItemProps = useRender.ComponentProps<"div">;
+
+export function DescriptionItem({ className, render, ...props }: DescriptionItemProps) {
+  const { item } = descriptionList();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: item({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "description-item",
+    },
+  });
+}
+
+export type DescriptionTermProps = useRender.ComponentProps<"dt">;
+
+export function DescriptionTerm({ className, render, ...props }: DescriptionTermProps) {
+  const theme = useThemeFamily();
+  const { term } = descriptionList({ theme });
+  const defaultProps: useRender.ElementProps<"dt"> = {
+    className: term({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "dt",
+    render,
+    props: mergeProps<"dt">(defaultProps, props),
+    state: {
+      slot: "description-term",
+    },
+  });
+}
+
+export type DescriptionDetailsProps = useRender.ComponentProps<"dd">;
+
+export function DescriptionDetails({ className, render, ...props }: DescriptionDetailsProps) {
+  const theme = useThemeFamily();
+  const { details } = descriptionList({ theme });
+  const defaultProps: useRender.ElementProps<"dd"> = {
+    className: details({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "dd",
+    render,
+    props: mergeProps<"dd">(defaultProps, props),
+    state: {
+      slot: "description-details",
+    },
+  });
+}
+
+export type DescriptionActionProps = useRender.ComponentProps<"span">;
+
+export function DescriptionAction({ className, render, ...props }: DescriptionActionProps) {
+  const { action } = descriptionList();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: action({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "description-action",
+    },
+  });
+}

package/src/components/description-list/index.ts

@@ -0,0 +1,14 @@
+export {
+  DescriptionAction,
+  DescriptionDetails,
+  DescriptionItem,
+  DescriptionList,
+  DescriptionTerm,
+} from "./description-list.tsx";
+export type {
+  DescriptionActionProps,
+  DescriptionDetailsProps,
+  DescriptionItemProps,
+  DescriptionListProps,
+  DescriptionTermProps,
+} from "./description-list.tsx";