raft-ui 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,11 +1,5 @@
-## [0.0.6](https://github.com/botiverse/rui/compare/v0.0.5...v0.0.6) (2026-06-25)
-
-### Features
-
-- **alert-dialog:** add destructive confirmation component ([f3507ae](https://github.com/botiverse/rui/commit/f3507ae0d462575ab67d4b814f7c9a3fb4f94547))
-- **dialog:** add dialog component ([e789e11](https://github.com/botiverse/rui/commit/e789e11e11f909ce8195599baa93a75bee0e38be))
-- **separator:** add separator component ([bd098c9](https://github.com/botiverse/rui/commit/bd098c90b352477ec6ac16f84f4ffe7633dba9ce))
+## [0.0.7](https://github.com/botiverse/rui/compare/v0.0.6...v0.0.7) (2026-06-25)
 
 ### Bug Fixes
 
-- **ui:** route wip components through wip entry ([21defb5](https://github.com/botiverse/rui/commit/21defb51ca0595fdcd2269300bd046770a722396))
+- **ui:** publish styles from dist ([1fed16f](https://github.com/botiverse/rui/commit/1fed16f7bc0f0982523fbe3de337d1ece926737c))

package/{src → dist}/styles.css

@@ -2,8 +2,6 @@
 
 /* Pure token contract. No legacy action/surface/destructive/component aliases. */
 
-@source "./components";
-
 @theme {
   --shadow-*: initial;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {
@@ -10,8 +10,7 @@
   },
   "files": [
     "CHANGELOG.md",
-    "dist",
-    "src"
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -27,7 +26,7 @@
       "types": "./dist/wip.d.mts",
       "default": "./dist/wip.mjs"
     },
-    "./styles.css": "./src/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {

package/src/components/alert-dialog/alert-dialog.tsx

@@ -1,215 +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";
-import { Button, type ButtonProps } from "../button/index";
-
-const alertDialog = 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)] -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: ["grid min-w-0 gap-1"],
-    media: ["flex size-10 shrink-0 items-center justify-center"],
-    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"],
-        media: ["border-2 border-line-strong bg-warning-base text-foreground-inverse"],
-        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)]",
-        ],
-        media: ["rounded-md bg-danger-lighter text-danger-base"],
-        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)]",
-        ],
-      },
-    },
-    size: {
-      sm: {
-        content: ["max-w-sm"],
-      },
-      md: {
-        content: ["max-w-md"],
-      },
-    },
-  },
-  defaultVariants: {
-    size: "sm",
-  },
-});
-
-export type AlertDialogProps = BaseDialog.Root.Props;
-
-export function AlertDialog(props: AlertDialogProps) {
-  return <BaseDialog.Root data-slot="alert-dialog" {...props} />;
-}
-
-export type AlertDialogTriggerProps = BaseDialog.Trigger.Props;
-
-export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
-  return <BaseDialog.Trigger data-slot="alert-dialog-trigger" {...props} />;
-}
-
-export type AlertDialogPortalProps = BaseDialog.Portal.Props;
-
-export function AlertDialogPortal(props: AlertDialogPortalProps) {
-  return <BaseDialog.Portal data-slot="alert-dialog-portal" {...props} />;
-}
-
-export type AlertDialogOverlayProps = StyledProps<BaseDialog.Backdrop.Props>;
-
-export function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {
-  const theme = useThemeFamily();
-  const { overlay } = alertDialog({ theme });
-
-  return (
-    <BaseDialog.Backdrop
-      data-slot="alert-dialog-overlay"
-      className={overlay({ className })}
-      {...props}
-    />
-  );
-}
-
-export type AlertDialogContentProps = StyledProps<BaseDialog.Popup.Props> & {
-  portalProps?: AlertDialogPortalProps;
-  overlay?: false | AlertDialogOverlayProps;
-  size?: "sm" | "md";
-};
-
-export function AlertDialogContent({
-  className,
-  children,
-  portalProps,
-  overlay,
-  size,
-  ...props
-}: AlertDialogContentProps) {
-  const theme = useThemeFamily();
-  const { content } = alertDialog({ theme, size });
-
-  return (
-    <AlertDialogPortal {...portalProps}>
-      {overlay === false ? null : <AlertDialogOverlay {...overlay} />}
-      <BaseDialog.Popup
-        data-slot="alert-dialog-content"
-        className={content({ className })}
-        {...props}
-        role="alertdialog"
-      >
-        {children}
-      </BaseDialog.Popup>
-    </AlertDialogPortal>
-  );
-}
-
-export type AlertDialogHeaderProps = ComponentPropsWithRef<"div">;
-
-export function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {
-  const theme = useThemeFamily();
-  const { header } = alertDialog({ theme });
-
-  return <div data-slot="alert-dialog-header" className={header({ className })} {...props} />;
-}
-
-export type AlertDialogMediaProps = ComponentPropsWithRef<"div">;
-
-export function AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {
-  const theme = useThemeFamily();
-  const { media } = alertDialog({ theme });
-
-  return <div data-slot="alert-dialog-media" className={media({ className })} {...props} />;
-}
-
-export type AlertDialogBodyProps = ComponentPropsWithRef<"div">;
-
-export function AlertDialogBody({ className, ...props }: AlertDialogBodyProps) {
-  const theme = useThemeFamily();
-  const { body } = alertDialog({ theme });
-
-  return <div data-slot="alert-dialog-body" className={body({ className })} {...props} />;
-}
-
-export type AlertDialogFooterProps = ComponentPropsWithRef<"div">;
-
-export function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {
-  const theme = useThemeFamily();
-  const { footer } = alertDialog({ theme });
-
-  return <div data-slot="alert-dialog-footer" className={footer({ className })} {...props} />;
-}
-
-export type AlertDialogTitleProps = StyledProps<BaseDialog.Title.Props>;
-
-export function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {
-  const theme = useThemeFamily();
-  const { title } = alertDialog({ theme });
-
-  return (
-    <BaseDialog.Title data-slot="alert-dialog-title" className={title({ className })} {...props} />
-  );
-}
-
-export type AlertDialogDescriptionProps = StyledProps<BaseDialog.Description.Props>;
-
-export function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps) {
-  const theme = useThemeFamily();
-  const { description } = alertDialog({ theme });
-
-  return (
-    <BaseDialog.Description
-      data-slot="alert-dialog-description"
-      className={description({ className })}
-      {...props}
-    />
-  );
-}
-
-export type AlertDialogActionProps = ButtonProps;
-
-export function AlertDialogAction(props: AlertDialogActionProps) {
-  return <Button data-slot="alert-dialog-action" {...props} />;
-}
-
-export type AlertDialogCancelProps = Omit<BaseDialog.Close.Props, "render"> &
-  Pick<ButtonProps, "variant" | "size"> & {
-    className?: string;
-  };
-
-export function AlertDialogCancel({
-  className,
-  variant = "outline",
-  size = "sm",
-  ...props
-}: AlertDialogCancelProps) {
-  return (
-    <BaseDialog.Close
-      data-slot="alert-dialog-cancel"
-      render={<Button className={className} variant={variant} size={size} />}
-      {...props}
-    />
-  );
-}

package/src/components/alert-dialog/index.ts

@@ -1,30 +0,0 @@
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogBody,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "./alert-dialog";
-export type {
-  AlertDialogActionProps,
-  AlertDialogBodyProps,
-  AlertDialogCancelProps,
-  AlertDialogContentProps,
-  AlertDialogDescriptionProps,
-  AlertDialogFooterProps,
-  AlertDialogHeaderProps,
-  AlertDialogMediaProps,
-  AlertDialogOverlayProps,
-  AlertDialogPortalProps,
-  AlertDialogProps,
-  AlertDialogTitleProps,
-  AlertDialogTriggerProps,
-} from "./alert-dialog";

package/src/components/avatar/avatar.tsx

@@ -1,375 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-import { Avatar as AvatarPrimitive } from "@base-ui/react";
-import { tv, type VariantProps } from "../../lib/tv";
-import { useThemeFamily } from "../../lib/theme/use-theme";
-import type { StyledProps } from "../../lib/styled-props";
-
-// Avatar family built on Base UI's Avatar primitive. Compose `<AvatarImage>`,
-// `<AvatarFallback>`, and `<AvatarBadge>` as children; with no children a
-// default `<AvatarFallback>` renders the placeholder. All parts share one
-// `tv()` slots config so theme / type / size styling lives in a single place.
-//
-// The original's avatar fetching (`AgentAvatar` / `GravatarAvatar`, app domain)
-// is dropped: pass a URL via `<AvatarImage src>` and a custom fallback node via
-// `<AvatarFallback>`.
-//
-// `size` is a compact t-shirt scale distilled from the original call-site
-// contexts: xl profile/detail (64), lg mention/large identity (48), md panel
-// header (36), sm list rows (32), xs compact/sidebar rows (20), and 2xs inline
-// preview chips (14). One-off source contexts such as account-tile, members-row,
-// and creator-link no longer get public size names.
-// Brutal border weight follows size: >=32px frames use `border-2`, smaller ones
-// `border`; elegant uses a pseudo-element hairline. `AvatarFallback` /
-// `AvatarBadge` auto-scale to the parent via its `data-size` + `group/avatar`
-// hook; keep their per-step selectors in sync with the `size` scale.
-const avatar = tv({
-  slots: {
-    root: ["group/avatar relative flex shrink-0 items-center justify-center select-none"],
-    image: ["size-full object-cover"],
-    fallback: [
-      "flex size-full items-center justify-center",
-      "[&>svg]:size-4",
-      "group-data-[size=xl]/avatar:[&>svg]:size-6",
-      "group-data-[size=lg]/avatar:[&>svg]:size-6",
-      "group-data-[size=md]/avatar:[&>svg]:size-[18px]",
-      "group-data-[size=sm]/avatar:[&>svg]:size-4",
-      "group-data-[size=xs]/avatar:[&>svg]:size-3",
-      "group-data-[size=2xs]/avatar:[&>svg]:size-2.5",
-    ],
-    badge: [
-      "absolute right-0 bottom-0 z-10 translate-x-1/4 translate-y-1/4 select-none",
-      "inline-flex items-center justify-center rounded-full outline-2 outline-white",
-      "size-2 [&>svg]:hidden",
-      "group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
-      "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
-      "group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
-      "group-data-[size=sm]/avatar:size-2",
-      "group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:outline",
-      "group-data-[size=2xs]/avatar:size-1.5 group-data-[size=2xs]/avatar:outline",
-    ],
-    group: ["group/avatar-group flex items-center"],
-  },
-  variants: {
-    theme: {
-      brutal: {
-        root: "border-line-strong",
-        fallback: "text-black",
-        badge: ["bg-success-base text-foreground-strong"],
-        group: [
-          "-space-x-1.5",
-          "*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-primary-50",
-          "*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-primary-50",
-        ],
-      },
-      elegant: {
-        root: ["bg-layer-muted"],
-        image: ["rounded-full"],
-        fallback: [
-          "overflow-hidden bg-layer-muted text-foreground-placeholder/70 text-sm",
-          "rounded-full",
-          "group-data-[size=xs]/avatar:text-xs",
-          "group-data-[size=2xs]/avatar:text-[10px]",
-        ],
-        badge: [
-          "translate-x-0 translate-y-0 bg-success-base text-foreground-inverse",
-          "right-0.5 bottom-0.5",
-          "group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1",
-          "group-data-[size=lg]/avatar:right-0.75 group-data-[size=lg]/avatar:bottom-0.75",
-        ],
-        group: [
-          "-space-x-2",
-          "*:data-[slot=avatar]:outline *:data-[slot=avatar]:outline-2 *:data-[slot=avatar]:outline-background",
-          "*:data-[slot=avatar-group-count]:outline *:data-[slot=avatar-group-count]:outline-2 *:data-[slot=avatar-group-count]:outline-background",
-        ],
-      },
-    },
-    type: {
-      agent: {},
-      human: {},
-    },
-    size: {
-      xl: { root: "size-16" },
-      lg: { root: "size-12" },
-      md: { root: "size-9" },
-      sm: { root: "size-8" },
-      xs: { root: "size-5" },
-      "2xs": { root: "size-[14px]" },
-    },
-  },
-  compoundVariants: [
-    {
-      theme: "brutal",
-      size: ["xl", "lg", "md", "sm"],
-      class: { root: "border-2" },
-    },
-    {
-      theme: "brutal",
-      size: ["xs", "2xs"],
-      class: { root: "border" },
-    },
-    {
-      theme: "brutal",
-      type: "agent",
-      class: { root: "bg-info-base" },
-    },
-    {
-      theme: "brutal",
-      type: "human",
-      class: { root: "bg-brutal-purple text-foreground-strong" },
-    },
-    {
-      theme: "elegant",
-      size: "xl",
-      class: {
-        root: "rounded-full",
-      },
-    },
-    {
-      theme: "elegant",
-      size: "lg",
-      class: {
-        root: "rounded-full",
-      },
-    },
-    {
-      theme: "elegant",
-      size: ["md", "sm"],
-      class: {
-        root: "rounded-full",
-      },
-    },
-    {
-      theme: "elegant",
-      size: "xs",
-      class: {
-        root: "rounded-full",
-      },
-    },
-    {
-      theme: "elegant",
-      size: "2xs",
-      class: {
-        root: "rounded-full",
-      },
-    },
-    {
-      theme: "elegant",
-      type: "agent",
-      class: { root: "text-foreground-muted" },
-    },
-    {
-      theme: "elegant",
-      type: "human",
-      class: { root: "text-foreground-muted" },
-    },
-  ],
-});
-
-export type AvatarSize = NonNullable<VariantProps<typeof avatar>["size"]>;
-
-export type AvatarProps = StyledProps<AvatarPrimitive.Root.Props> &
-  Required<Pick<VariantProps<typeof avatar>, "size" | "type">>;
-
-export function Avatar({ size, type, className, children, ...props }: AvatarProps) {
-  const theme = useThemeFamily();
-  const { root } = avatar({ theme, type, size });
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={root({ className })}
-      {...props}
-    >
-      {children ?? <AvatarFallback />}
-    </AvatarPrimitive.Root>
-  );
-}
-
-export type AvatarImageProps = StyledProps<AvatarPrimitive.Image.Props>;
-
-// Managed avatar image. Base UI tracks its load state and hides it (revealing the
-// fallback) while loading or on error. Fills the frame edge-to-edge.
-export function AvatarImage({ className, ...props }: AvatarImageProps) {
-  const theme = useThemeFamily();
-  const { image } = avatar({ theme });
-  return (
-    <AvatarPrimitive.Image data-slot="avatar-image" className={image({ className })} {...props} />
-  );
-}
-
-export type AvatarFallbackProps = StyledProps<AvatarPrimitive.Fallback.Props>;
-
-function AvatarFallbackIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <g
-        fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1"
-        stroke="currentColor"
-      >
-        <circle cx="9" cy="7.75" r="2" />
-        <path d="M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" />
-        <circle
-          cx="1.889"
-          cy="10.414"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="2.971"
-          cy="4.972"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="2.972"
-          cy="13.027"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle cx="1.89" cy="7.586" r=".75" fill="currentColor" data-stroke="none" stroke="none" />
-        <circle
-          cx="4.973"
-          cy="2.972"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="7.586"
-          cy="1.889"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="15.029"
-          cy="13.028"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="16.111"
-          cy="7.586"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="13.028"
-          cy="2.971"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="16.11"
-          cy="10.414"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="15.028"
-          cy="4.973"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-        <circle
-          cx="10.414"
-          cy="1.89"
-          r=".75"
-          fill="currentColor"
-          data-stroke="none"
-          stroke="none"
-        />
-      </g>
-    </svg>
-  );
-}
-
-// Shown when no AvatarImage has loaded. With no children it renders the
-// placeholder user icon, auto-scaled via the parent's `data-size` hook.
-export function AvatarFallback({ className, children, ...props }: AvatarFallbackProps) {
-  const theme = useThemeFamily();
-  const { fallback } = avatar({ theme });
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={fallback({ className })}
-      {...props}
-    >
-      {children ?? <AvatarFallbackIcon />}
-    </AvatarPrimitive.Fallback>
-  );
-}
-
-export type AvatarBadgeProps = ComponentPropsWithRef<"span">;
-
-// Presence/status badge overlaid in the avatar's bottom-right corner. The root
-// stays overflow-visible so the badge can sit on the frame edge. Default fill is
-// lime; override with a `bg-*` class via className. Optionally wraps a small icon.
-export function AvatarBadge({ className, ...props }: AvatarBadgeProps) {
-  const theme = useThemeFamily();
-  const { badge } = avatar({ theme });
-  return <span data-slot="avatar-badge" className={badge({ className })} {...props} />;
-}
-
-export type AvatarGroupProps = ComponentPropsWithRef<"div">;
-
-// Overlapping stack of avatars (and an optional trailing AvatarGroupCount). The
-// ring color follows the active theme's surface assumptions.
-export function AvatarGroup({ className, ...props }: AvatarGroupProps) {
-  const theme = useThemeFamily();
-  const { group } = avatar({ theme });
-  return <div data-slot="avatar-group" className={group({ className })} {...props} />;
-}
-
-export type AvatarGroupCountProps = ComponentPropsWithRef<"span"> & {
-  /** Matches the frame scale of the sibling avatars. */
-  size: AvatarSize;
-};
-
-// Trailing "+N" overflow chip for an AvatarGroup. Reuses the Avatar frame but
-// omits `type`, swapping the role fill for a neutral count chip.
-export function AvatarGroupCount({ size, className, ...props }: AvatarGroupCountProps) {
-  const theme = useThemeFamily();
-  const { root } = avatar({ theme, size });
-  const countClassName =
-    theme === "elegant"
-      ? "bg-layer-muted font-medium text-xs leading-none tabular-nums text-foreground-muted"
-      : "bg-secondary-400 font-bold text-xs leading-none tabular-nums text-foreground-strong";
-  return (
-    <span
-      data-slot="avatar-group-count"
-      className={root({
-        class: [countClassName, className],
-      })}
-      {...props}
-    />
-  );
-}

package/src/components/avatar/index.ts

@@ -1,17 +0,0 @@
-export {
-  Avatar,
-  type AvatarSize,
-  AvatarImage,
-  AvatarFallback,
-  AvatarBadge,
-  AvatarGroup,
-  AvatarGroupCount,
-} from "./avatar";
-export type {
-  AvatarProps,
-  AvatarImageProps,
-  AvatarFallbackProps,
-  AvatarBadgeProps,
-  AvatarGroupProps,
-  AvatarGroupCountProps,
-} from "./avatar";