raft-ui 0.0.1

package/src/components/quoted-message-card/quoted-message-card.tsx

@@ -0,0 +1,391 @@
+import { MessageSquare } from "lucide-react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv } from "../../lib/tv.ts";
+import { PreviewShell, type PreviewShellProps } from "../preview-shell/preview-shell.tsx";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+// A quoted-message preview routed through PreviewShell. The source's app-domain
+// fields (channel object, author fetching, markdown rendering, attachments
+// derivation) are now composed by the caller; this file owns only the visual
+// slots and their brutal/elegant styling hooks.
+const quotedMessageCard = tv({
+  slots: {
+    root: ["group block w-full text-left"],
+    body: ["px-2.5 py-2 sm:px-3 sm:py-2.5"],
+    unavailable: ["text-[13px] leading-snug"],
+    header: ["mb-1 flex items-start gap-2 sm:mb-1.5"],
+    meta: ["flex min-w-0 flex-1 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs leading-none"],
+    channel: ["inline-flex items-center gap-1 font-bold", "[&_svg]:size-[11px] [&_svg]:shrink-0"],
+    separator: ["text-foreground/30"],
+    author: ["inline-flex min-w-0 items-center gap-1.5"],
+    authorName: ["truncate font-bold"],
+    authorSubtitle: ["truncate font-mono text-[10px]"],
+    thread: ["inline-flex items-center gap-1 font-bold", "[&_svg]:size-2.5 [&_svg]:shrink-0"],
+    tag: [
+      "inline-flex items-center gap-1 border-[1.5px] border-line-strong px-1.5 py-0.5",
+      "text-[11px] font-bold leading-none",
+    ],
+    timestamp: ["shrink-0 font-mono text-[10px]"],
+    contentWrap: ["min-w-0"],
+    content: ["line-clamp-2 text-xs leading-snug sm:text-[13px]"],
+    attachments: ["mt-2 flex flex-wrap gap-1.5"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        channel: "text-foreground/70",
+        authorName: "text-foreground/70",
+        authorSubtitle: "text-foreground/40",
+        thread: "text-accent-400",
+        timestamp: "text-foreground/40",
+        content: "text-foreground-strong",
+      },
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+  },
+});
+
+export type QuotedMessageCardProps = PreviewShellProps;
+
+export function QuotedMessageCard({
+  className,
+  "data-testid": testId = "quoted-message-card",
+  ...props
+}: QuotedMessageCardProps) {
+  const { root } = quotedMessageCard();
+  return <PreviewShell data-testid={testId} className={root({ className })} {...props} />;
+}
+
+export type QuotedMessageCardBodyProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardBody({ className, render, ...props }: QuotedMessageCardBodyProps) {
+  const { body } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: body({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-body",
+    },
+  });
+}
+
+export type QuotedMessageCardUnavailableProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardUnavailable({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardUnavailableProps) {
+  const { unavailable } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: unavailable({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-unavailable",
+    },
+  });
+}
+
+export type QuotedMessageCardHeaderProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardHeader({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardHeaderProps) {
+  const { header } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: header({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-header",
+    },
+  });
+}
+
+export type QuotedMessageCardMetaProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardMeta({ className, render, ...props }: QuotedMessageCardMetaProps) {
+  const { meta } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: meta({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-meta",
+    },
+  });
+}
+
+export type QuotedMessageCardChannelProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardChannel({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardChannelProps) {
+  const theme = useThemeFamily();
+  const { channel } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: channel({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-channel",
+    },
+  });
+}
+
+export type QuotedMessageCardSeparatorProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardSeparator({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardSeparatorProps) {
+  const { separator } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: separator({ className }),
+    children: "·",
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-separator",
+    },
+  });
+}
+
+export type QuotedMessageCardAuthorProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardAuthor({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardAuthorProps) {
+  const { author } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: author({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-author",
+    },
+  });
+}
+
+export type QuotedMessageCardAuthorNameProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardAuthorName({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardAuthorNameProps) {
+  const theme = useThemeFamily();
+  const { authorName } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: authorName({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-author-name",
+    },
+  });
+}
+
+export type QuotedMessageCardAuthorSubtitleProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardAuthorSubtitle({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardAuthorSubtitleProps) {
+  const theme = useThemeFamily();
+  const { authorSubtitle } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: authorSubtitle({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-author-subtitle",
+    },
+  });
+}
+
+export type QuotedMessageCardThreadProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardThread({
+  className,
+  render,
+  children = "Thread",
+  ...props
+}: QuotedMessageCardThreadProps) {
+  const theme = useThemeFamily();
+  const { thread } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: thread({ className }),
+    children: (
+      <>
+        <MessageSquare />
+        {children}
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-thread",
+    },
+  });
+}
+
+export type QuotedMessageCardTagProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardTag({ className, render, ...props }: QuotedMessageCardTagProps) {
+  const { tag } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: tag({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-tag",
+    },
+  });
+}
+
+export type QuotedMessageCardTimestampProps = useRender.ComponentProps<"span">;
+
+export function QuotedMessageCardTimestamp({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardTimestampProps) {
+  const theme = useThemeFamily();
+  const { timestamp } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: timestamp({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-timestamp",
+    },
+  });
+}
+
+export type QuotedMessageCardContentWrapProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardContentWrap({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardContentWrapProps) {
+  const { contentWrap } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: contentWrap({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-content-wrap",
+    },
+  });
+}
+
+export type QuotedMessageCardContentProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardContent({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardContentProps) {
+  const theme = useThemeFamily();
+  const { content } = quotedMessageCard({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: content({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-content",
+    },
+  });
+}
+
+export type QuotedMessageCardAttachmentsProps = useRender.ComponentProps<"div">;
+
+export function QuotedMessageCardAttachments({
+  className,
+  render,
+  ...props
+}: QuotedMessageCardAttachmentsProps) {
+  const { attachments } = quotedMessageCard();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: attachments({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "quoted-message-card-attachments",
+    },
+  });
+}

package/src/components/radio-group/index.ts

@@ -0,0 +1,6 @@
+export { RadioGroup, RadioGroupIndicator, RadioGroupItem } from "./radio-group.tsx";
+export type {
+  RadioGroupIndicatorProps,
+  RadioGroupItemProps,
+  RadioGroupProps,
+} from "./radio-group.tsx";

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,119 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { tv } from "../../lib/tv.ts";
+import { cn } from "../../lib/cn.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const radioGroup = tv({
+  slots: {
+    root: [
+      "grid w-full gap-2",
+      "data-[disabled]:[&>label]:cursor-not-allowed data-[disabled]:[&>label]:text-foreground-disabled",
+      "data-[disabled]:[&>label_*]:text-foreground-disabled",
+    ],
+    item: [
+      "relative inline-flex shrink-0 touch-manipulation items-center justify-center rounded-full outline-none",
+      "data-[disabled]:cursor-not-allowed",
+      "after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+    ],
+    indicator: ["pointer-events-none flex size-full items-center justify-center"],
+    dot: ["block rounded-full bg-current"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: ["font-sans [&>label]:font-medium"],
+        item: [
+          "size-4 border-2 border-line-strong bg-layer-panel text-foreground-strong",
+          "hover:bg-primary-400/30 data-[checked]:bg-primary-400",
+          "data-[disabled]:border-line-muted data-[disabled]:bg-layer-muted data-[disabled]:text-line data-[disabled]:hover:bg-layer-muted",
+          "data-[checked]:data-[disabled]:bg-layer-muted",
+          "focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        ],
+        dot: "size-1.5",
+      },
+      elegant: {
+        root: "gap-2.5",
+        item: [
+          "size-3.5 bg-layer-panel text-foreground-inverse",
+          "shadow-[inset_0_1px_0.5px_oklch(1_0_0_/_0.05),0_1px_1.5px_-1px_oklch(0_0_0_/_0.035),0_0_0_1px_var(--line-subtle)]",
+          "hover:bg-foreground/[0.04] data-[checked]:bg-foreground-strong",
+          "data-[checked]:shadow-[0_1px_1.5px_-1px_oklch(0_0_0_/_0.08),0_0_0_1px_oklch(0_0_0_/_0.68)]",
+          "data-[disabled]:bg-layer-muted data-[disabled]:text-line data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)] data-[disabled]:hover:bg-layer-muted",
+          "data-[checked]:data-[disabled]:bg-layer-muted data-[checked]:data-[disabled]:shadow-[0_1px_1px_-1px_oklch(0_0_0_/_0.02),0_0_0_1px_var(--line-subtle)]",
+          "active:scale-[0.96] data-[disabled]:active:scale-100 motion-reduce:active:scale-100",
+          "focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        ],
+        dot: "size-1.5",
+      },
+    },
+  },
+});
+
+export type RadioGroupProps<T extends string = string> = StyledProps<
+  Omit<BaseRadioGroup.Props<T>, "aria-label">
+> & {
+  ariaLabel?: string;
+};
+
+export function RadioGroup<T extends string = string>({
+  ariaLabel,
+  className,
+  ...props
+}: RadioGroupProps<T>) {
+  const theme = useThemeFamily();
+  const { root } = radioGroup({ theme });
+
+  return (
+    <BaseRadioGroup
+      aria-label={ariaLabel}
+      data-slot="radio-group"
+      className={root({ className })}
+      {...props}
+    />
+  );
+}
+
+export type RadioGroupIndicatorProps = StyledProps<BaseRadio.Indicator.Props>;
+
+export function RadioGroupIndicator({ className, children, ...props }: RadioGroupIndicatorProps) {
+  const theme = useThemeFamily();
+  const { indicator, dot } = radioGroup({ theme });
+
+  return (
+    <BaseRadio.Indicator
+      data-slot="radio-group-indicator"
+      className={indicator({ className })}
+      {...props}
+    >
+      {children ?? <span data-slot="radio-group-dot" className={dot()} />}
+    </BaseRadio.Indicator>
+  );
+}
+
+export type RadioGroupItemProps<T extends string = string> = StyledProps<
+  BaseRadio.Root.Props<T>
+> & {
+  appearance?: "default" | "none";
+};
+
+export function RadioGroupItem<T extends string = string>({
+  appearance = "default",
+  className,
+  children,
+  ...props
+}: RadioGroupItemProps<T>) {
+  const theme = useThemeFamily();
+  const { item } = radioGroup({ theme });
+  const itemClassName =
+    appearance === "none"
+      ? cn("sr-only", "data-[disabled]:cursor-not-allowed", className)
+      : item({ className });
+
+  return (
+    <BaseRadio.Root data-slot="radio-group-item" className={itemClassName} {...props}>
+      {children ?? (appearance === "default" ? <RadioGroupIndicator /> : null)}
+    </BaseRadio.Root>
+  );
+}

package/src/components/section-header/index.ts

@@ -0,0 +1,16 @@
+export {
+  SectionHeader,
+  SectionHeaderActions,
+  SectionHeaderContent,
+  SectionHeaderCount,
+  SectionHeaderIcon,
+  SectionHeaderTitle,
+} from "./section-header.tsx";
+export type {
+  SectionHeaderActionsProps,
+  SectionHeaderContentProps,
+  SectionHeaderCountProps,
+  SectionHeaderIconProps,
+  SectionHeaderProps,
+  SectionHeaderTitleProps,
+} from "./section-header.tsx";

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

@@ -0,0 +1,117 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv } from "../../lib/tv.ts";
+import { SectionLabel, type SectionLabelProps } from "../section-label/section-label.tsx";
+
+const sectionHeader = tv({
+  slots: {
+    root: ["flex items-center justify-between gap-2"],
+    content: ["flex min-w-0 items-center gap-2"],
+    icon: ["shrink-0 text-foreground/60", "[&_svg]:size-4 [&_svg]:shrink-0"],
+    count: ["ml-2 font-mono text-foreground/40"],
+    actions: ["flex shrink-0 items-center gap-1.5"],
+  },
+  variants: {
+    theme: {
+      brutal: {},
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+  },
+});
+
+export type SectionHeaderProps = useRender.ComponentProps<"div">;
+
+export function SectionHeader({ className, render, ...props }: SectionHeaderProps) {
+  const { root } = sectionHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "section-header",
+    },
+  });
+}
+
+export type SectionHeaderContentProps = useRender.ComponentProps<"div">;
+
+export function SectionHeaderContent({ className, render, ...props }: SectionHeaderContentProps) {
+  const { content } = sectionHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: content({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "section-header-content",
+    },
+  });
+}
+
+export type SectionHeaderIconProps = useRender.ComponentProps<"span">;
+
+export function SectionHeaderIcon({ className, render, ...props }: SectionHeaderIconProps) {
+  const { icon } = sectionHeader();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: icon({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "section-header-icon",
+    },
+  });
+}
+
+export type SectionHeaderTitleProps = SectionLabelProps;
+
+export function SectionHeaderTitle({ render, ...props }: SectionHeaderTitleProps) {
+  return <SectionLabel render={render ?? <div />} {...props} data-slot="section-header-title" />;
+}
+
+export type SectionHeaderCountProps = useRender.ComponentProps<"span">;
+
+export function SectionHeaderCount({ className, render, ...props }: SectionHeaderCountProps) {
+  const { count } = sectionHeader();
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: count({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "section-header-count",
+    },
+  });
+}
+
+export type SectionHeaderActionsProps = useRender.ComponentProps<"div">;
+
+export function SectionHeaderActions({ className, render, ...props }: SectionHeaderActionsProps) {
+  const { actions } = sectionHeader();
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: actions({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "section-header-actions",
+    },
+  });
+}

package/src/components/section-label/index.ts

@@ -0,0 +1,2 @@
+export { SectionLabel } from "./section-label.tsx";
+export type { SectionLabelProps } from "./section-label.tsx";

package/src/components/section-label/section-label.tsx

@@ -0,0 +1,38 @@
+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 sectionLabel = tv({
+  slots: {
+    root: ["text-xs font-bold uppercase tracking-widest"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: "text-foreground/60",
+      },
+      // Elegant styling is deferred; see the component TODO.
+      elegant: {},
+    },
+  },
+});
+
+export type SectionLabelProps = useRender.ComponentProps<"span">;
+
+export function SectionLabel({ className, render, ...props }: SectionLabelProps) {
+  const theme = useThemeFamily();
+  const { root } = sectionLabel({ theme });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "section-label",
+    },
+  });
+}

package/src/components/segmented-control/index.ts

@@ -0,0 +1,12 @@
+export {
+  SegmentedControl,
+  SegmentedControlCount,
+  SegmentedControlItem,
+  SegmentedControlLabel,
+} from "./segmented-control.tsx";
+export type {
+  SegmentedControlCountProps,
+  SegmentedControlItemProps,
+  SegmentedControlLabelProps,
+  SegmentedControlProps,
+} from "./segmented-control.tsx";