raft-ui 0.0.5 → 0.0.7

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

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

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

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

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