raft-ui 0.0.6 → 0.0.8

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";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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";
-export type {
-  ConversationPreviewCardActionProps,
-  ConversationPreviewCardAuthorNameProps,
-  ConversationPreviewCardAuthorProps,
-  ConversationPreviewCardAuthorSubtitleProps,
-  ConversationPreviewCardChannelProps,
-  ConversationPreviewCardContentProps,
-  ConversationPreviewCardFooterProps,
-  ConversationPreviewCardMetaProps,
-  ConversationPreviewCardPreviewAuthorProps,
-  ConversationPreviewCardPreviewLeadingProps,
-  ConversationPreviewCardPreviewProps,
-  ConversationPreviewCardProps,
-  ConversationPreviewCardSecondaryPreviewProps,
-  ConversationPreviewCardTimestampProps,
-} from "./conversation-preview-card";

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";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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";
-export type {
-  DescriptionActionProps,
-  DescriptionDetailsProps,
-  DescriptionItemProps,
-  DescriptionListProps,
-  DescriptionTermProps,
-} from "./description-list";

package/src/components/dialog/dialog.tsx

@@ -1,152 +0,0 @@
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import type { ComponentPropsWithRef } from "react";
-import { tv } from "../../lib/tv";
-import type { StyledProps } from "../../lib/styled-props";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-const dialog = tv({
-  slots: {
-    overlay: [
-      "fixed inset-0 z-50",
-      "transition-opacity duration-100",
-      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
-    ],
-    content: [
-      "fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2",
-      "outline-none transition-[opacity,transform] duration-100",
-      "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
-      "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
-    ],
-    header: ["flex min-w-0 flex-col gap-1"],
-    body: ["min-w-0"],
-    footer: ["flex items-center justify-end gap-3"],
-    title: ["m-0 min-w-0 text-foreground-strong"],
-    description: ["m-0 text-foreground-muted"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        overlay: ["bg-black/60"],
-        content: ["gap-4 border-2 border-line-strong bg-layer-panel p-6 shadow-xl"],
-        title: ["font-heading text-lg leading-none font-bold uppercase"],
-        description: ["font-sans text-sm leading-5 text-foreground/60"],
-      },
-      elegant: {
-        overlay: ["bg-black/20"],
-        content: [
-          "gap-5 rounded-lg bg-layer-popover p-5",
-          "shadow-[0_24px_48px_-24px_oklch(0.21_0.006_285_/_0.30),0_0_0_1px_oklch(0.21_0.006_285_/_0.08),0_1px_2px_oklch(0.21_0.006_285_/_0.08)]",
-        ],
-        title: ["font-sans text-base leading-5 font-medium tracking-[-0.005em]"],
-        description: [
-          "font-sans text-sm leading-5 text-[oklch(0.48_0_0)] dark:text-[oklch(0.76_0_0)]",
-        ],
-      },
-    },
-  },
-});
-
-export type DialogProps = BaseDialog.Root.Props;
-
-export function Dialog(props: DialogProps) {
-  return <BaseDialog.Root data-slot="dialog" {...props} />;
-}
-
-export type DialogTriggerProps = BaseDialog.Trigger.Props;
-
-export function DialogTrigger(props: DialogTriggerProps) {
-  return <BaseDialog.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-export type DialogPortalProps = BaseDialog.Portal.Props;
-
-export function DialogPortal(props: DialogPortalProps) {
-  return <BaseDialog.Portal data-slot="dialog-portal" {...props} />;
-}
-
-export type DialogOverlayProps = StyledProps<BaseDialog.Backdrop.Props>;
-
-export function DialogOverlay({ className, ...props }: DialogOverlayProps) {
-  const theme = useThemeFamily();
-  const { overlay } = dialog({ theme });
-  return (
-    <BaseDialog.Backdrop data-slot="dialog-overlay" className={overlay({ className })} {...props} />
-  );
-}
-
-export type DialogContentProps = StyledProps<BaseDialog.Popup.Props> & {
-  portalProps?: DialogPortalProps;
-  overlay?: false | DialogOverlayProps;
-};
-
-export function DialogContent({
-  className,
-  children,
-  portalProps,
-  overlay,
-  ...props
-}: DialogContentProps) {
-  const theme = useThemeFamily();
-  const { content } = dialog({ theme });
-
-  return (
-    <DialogPortal {...portalProps}>
-      {overlay === false ? null : <DialogOverlay {...overlay} />}
-      <BaseDialog.Popup data-slot="dialog-content" className={content({ className })} {...props}>
-        {children}
-      </BaseDialog.Popup>
-    </DialogPortal>
-  );
-}
-
-export type DialogCloseProps = BaseDialog.Close.Props;
-
-export function DialogClose(props: DialogCloseProps) {
-  return <BaseDialog.Close data-slot="dialog-close" {...props} />;
-}
-
-export type DialogHeaderProps = ComponentPropsWithRef<"div">;
-
-export function DialogHeader({ className, ...props }: DialogHeaderProps) {
-  const theme = useThemeFamily();
-  const { header } = dialog({ theme });
-  return <div data-slot="dialog-header" className={header({ className })} {...props} />;
-}
-
-export type DialogBodyProps = ComponentPropsWithRef<"div">;
-
-export function DialogBody({ className, ...props }: DialogBodyProps) {
-  const theme = useThemeFamily();
-  const { body } = dialog({ theme });
-  return <div data-slot="dialog-body" className={body({ className })} {...props} />;
-}
-
-export type DialogFooterProps = ComponentPropsWithRef<"div">;
-
-export function DialogFooter({ className, ...props }: DialogFooterProps) {
-  const theme = useThemeFamily();
-  const { footer } = dialog({ theme });
-  return <div data-slot="dialog-footer" className={footer({ className })} {...props} />;
-}
-
-export type DialogTitleProps = StyledProps<BaseDialog.Title.Props>;
-
-export function DialogTitle({ className, ...props }: DialogTitleProps) {
-  const theme = useThemeFamily();
-  const { title } = dialog({ theme });
-  return <BaseDialog.Title data-slot="dialog-title" className={title({ className })} {...props} />;
-}
-
-export type DialogDescriptionProps = StyledProps<BaseDialog.Description.Props>;
-
-export function DialogDescription({ className, ...props }: DialogDescriptionProps) {
-  const theme = useThemeFamily();
-  const { description } = dialog({ theme });
-  return (
-    <BaseDialog.Description
-      data-slot="dialog-description"
-      className={description({ className })}
-      {...props}
-    />
-  );
-}

package/src/components/dialog/index.ts

@@ -1,26 +0,0 @@
-export {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from "./dialog";
-export type {
-  DialogBodyProps,
-  DialogCloseProps,
-  DialogContentProps,
-  DialogDescriptionProps,
-  DialogFooterProps,
-  DialogHeaderProps,
-  DialogOverlayProps,
-  DialogPortalProps,
-  DialogProps,
-  DialogTitleProps,
-  DialogTriggerProps,
-} from "./dialog";