raft-ui 0.0.6 → 0.0.8

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

@@ -1,391 +0,0 @@
-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";
-import { PreviewShell, type PreviewShellProps } from "../preview-shell/preview-shell";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-// 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

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

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

@@ -1,119 +0,0 @@
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { tv } from "../../lib/tv";
-import { cn } from "../../lib/cn";
-import type { StyledProps } from "../../lib/styled-props";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-
-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

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

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

@@ -1,117 +0,0 @@
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import { tv } from "../../lib/tv";
-import { SectionLabel, type SectionLabelProps } from "../section-label/section-label";
-
-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

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

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

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

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