raft-ui 0.0.1

package/src/components/badge/badge.tsx

@@ -0,0 +1,393 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+export const badge = tv({
+  slots: {
+    root: [
+      "inline-flex h-5 w-fit shrink-0 min-w-0 max-w-full items-center gap-1 px-1.5",
+      "overflow-hidden whitespace-nowrap",
+      "text-[10px] font-bold leading-none",
+      "[&_[data-slot='spinner']]:!size-3 [&_[data-slot='spinner']]:!text-xs",
+    ],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: ["border border-line-strong"],
+      },
+      elegant: {
+        root: [
+          "gap-1.5 rounded-full border border-transparent px-2.5 py-0.5",
+          "[&:has(svg)]:px-2",
+          "[&_svg]:shrink-0 [&_svg]:translate-y-[0.5px]",
+          "text-[11px] font-medium leading-3 tracking-[0.22px]",
+        ],
+      },
+    },
+    appearance: {
+      solid: {
+        root: "",
+      },
+      soft: {
+        root: "",
+      },
+      outline: {
+        root: "",
+      },
+    },
+    variant: {
+      default: {
+        root: "bg-layer-panel text-foreground-strong",
+      },
+      primary: {
+        root: "bg-primary-400 text-primary-950",
+      },
+      information: {
+        root: "bg-info-base text-foreground-inverse",
+      },
+      muted: {
+        root: "bg-secondary-400 text-foreground-strong",
+      },
+      accent: {
+        root: "bg-accent-400 text-accent-950",
+      },
+      success: {
+        root: "bg-success-base text-success-dark",
+      },
+      warning: {
+        root: "bg-warning-base text-foreground-inverse",
+      },
+      danger: {
+        root: "bg-[oklch(0.66_0.19_31)] text-foreground-strong",
+      },
+    },
+    // Enables the old brutal casing recipe when a badge should read as a compact
+    // label. It defaults off so case-sensitive content stays intact.
+    uppercase: {
+      true: {
+        root: "uppercase tracking-wide",
+      },
+      false: {
+        root: "",
+      },
+    },
+  },
+  defaultVariants: {
+    appearance: "solid",
+    variant: "default",
+    uppercase: false,
+  },
+  compoundVariants: [
+    {
+      theme: "brutal",
+      appearance: "solid",
+      variant: "success",
+      class: { root: "bg-brutal-lime text-black" },
+    },
+    {
+      theme: "brutal",
+      appearance: "solid",
+      variant: "danger",
+      class: { root: "bg-brutal-red text-black" },
+    },
+    {
+      theme: "brutal",
+      appearance: "solid",
+      variant: "information",
+      class: { root: "bg-info-base text-info-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "solid",
+      variant: "warning",
+      class: { root: "bg-warning-base text-black" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "default",
+      class: { root: "bg-layer-muted text-foreground-strong" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "muted",
+      class: { root: "bg-secondary-100 text-secondary-900" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "primary",
+      class: { root: "bg-[oklch(0.958_0.047_86)] text-primary-950" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "information",
+      class: { root: "bg-info-lighter text-info-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "accent",
+      class: { root: "bg-accent-100 text-accent-950" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "success",
+      class: { root: "bg-success-lighter text-success-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "warning",
+      class: { root: "bg-warning-lighter text-warning-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "soft",
+      variant: "danger",
+      class: { root: "bg-danger-lighter text-danger-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "default",
+      class: { root: "bg-transparent text-foreground-strong" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "muted",
+      class: { root: "bg-transparent text-secondary-900" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "primary",
+      class: { root: "bg-transparent text-primary-700" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "information",
+      class: { root: "bg-transparent text-info-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "accent",
+      class: { root: "bg-transparent text-accent-700" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "success",
+      class: { root: "bg-transparent text-[oklch(0.48_0.12_153.079)]" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "warning",
+      class: { root: "bg-transparent text-warning-dark" },
+    },
+    {
+      theme: "brutal",
+      appearance: "outline",
+      variant: "danger",
+      class: { root: "bg-transparent text-[oklch(0.54_0.19_31)]" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "default",
+      class: {
+        root: "bg-line-muted text-foreground-muted",
+      },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "muted",
+      class: { root: "bg-[oklch(0.46_0.004_286)] text-[oklch(0.94_0.001_286)]" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "primary",
+      class: { root: "bg-primary-400 text-primary-950" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "information",
+      class: { root: "bg-info-base text-foreground-inverse" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "accent",
+      class: { root: "bg-accent-400 text-foreground-inverse" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "success",
+      class: { root: "bg-success-base text-foreground-inverse" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "warning",
+      class: { root: "bg-warning-base text-foreground-inverse" },
+    },
+    {
+      theme: "elegant",
+      appearance: "solid",
+      variant: "danger",
+      class: { root: "bg-[oklch(0.68_0.22_26.758)] text-foreground-inverse" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "default",
+      class: { root: "border-transparent bg-layer-muted text-foreground-strong" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "muted",
+      class: { root: "border-transparent bg-secondary-100 text-secondary-900" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "primary",
+      class: { root: "border-transparent bg-[oklch(0.958_0.047_86)] text-primary-950" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "information",
+      class: { root: "border-transparent bg-info-lighter text-info-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "accent",
+      class: { root: "border-transparent bg-accent-100 text-accent-950" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "success",
+      class: { root: "border-transparent bg-success-lighter text-success-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "warning",
+      class: { root: "border-transparent bg-warning-lighter text-warning-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "soft",
+      variant: "danger",
+      class: { root: "border-transparent bg-danger-lighter text-danger-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "default",
+      class: { root: "border-line-subtle bg-transparent text-foreground-strong" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "muted",
+      class: { root: "border-secondary-500 bg-transparent text-secondary-900" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "primary",
+      class: { root: "border-primary-500 bg-transparent text-primary-800" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "information",
+      class: { root: "border-info-base bg-transparent text-[oklch(0.48_0.09_219.2)]" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "accent",
+      class: { root: "border-accent-500 bg-transparent text-accent-800" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "success",
+      class: { root: "border-success-base bg-transparent text-success-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "warning",
+      class: { root: "border-warning-base bg-transparent text-warning-dark" },
+    },
+    {
+      theme: "elegant",
+      appearance: "outline",
+      variant: "danger",
+      class: { root: "border-danger-base bg-transparent text-danger-dark" },
+    },
+  ],
+});
+
+export type BadgeProps = useRender.ComponentProps<"span"> &
+  Omit<VariantProps<typeof badge>, "theme">;
+
+function BadgeRoot({ appearance, variant, uppercase, className, render, ...props }: BadgeProps) {
+  const theme = useThemeFamily();
+  const resolvedAppearance = appearance ?? "solid";
+  const resolvedUppercase = uppercase ?? false;
+  const { root } = badge({
+    theme,
+    appearance: resolvedAppearance,
+    variant,
+    uppercase: resolvedUppercase,
+  });
+  const defaultProps: useRender.ElementProps<"span"> = {
+    className: root({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(defaultProps, props),
+    state: {
+      slot: "badge",
+      appearance: resolvedAppearance,
+      variant,
+      uppercase: resolvedUppercase,
+    },
+  });
+}
+
+// Fixed success + uppercase "Experimental" preset. The visual identity lives in
+// Badge, so every experimental surface stays identical. Attached as a static
+// because it only presets props.
+function Experimental(props: Omit<BadgeProps, "appearance" | "variant" | "uppercase">) {
+  return (
+    <BadgeRoot variant="success" uppercase {...props}>
+      Experimental
+    </BadgeRoot>
+  );
+}
+
+export const Badge = Object.assign(BadgeRoot, { Experimental });

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from "./badge.tsx";
+export type { BadgeProps } from "./badge.tsx";

package/src/components/banner/banner.tsx

@@ -0,0 +1,269 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { tv, type VariantProps } from "../../lib/tv.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+
+const banner = tv({
+  slots: {
+    root: [""],
+    title: [""],
+    description: [""],
+    action: [""],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        root: [
+          "group/banner grid grid-cols-[0_minmax(0,1fr)] items-start border-2 border-line-strong",
+          "has-[>[data-slot=banner-action]]:grid-cols-[0_minmax(0,1fr)_auto]",
+          "has-[>svg]:grid-cols-[18px_minmax(0,1fr)]",
+          "[&:has(>svg):has(>[data-slot=banner-action])]:grid-cols-[18px_minmax(0,1fr)_auto]",
+          "[&>svg]:col-start-1 [&>svg]:row-span-2 [&>svg]:mt-0.5",
+          "[&>svg]:size-[18px] [&>svg]:shrink-0 [&>svg]:text-foreground-strong",
+        ],
+        title: [
+          "col-start-2 mb-0.5 text-sm font-bold text-foreground-strong",
+          "group-data-[size=sm]/banner:text-xs",
+        ],
+        description: [
+          "col-start-2 min-w-0 text-sm text-foreground-strong",
+          "group-data-[size=sm]/banner:text-xs",
+        ],
+        action: ["col-start-3 row-span-2 row-start-1 shrink-0"],
+      },
+      elegant: {
+        root: [
+          "group/banner grid w-full items-center gap-x-2 gap-y-0 rounded-sm border-0",
+          "text-[0.8125rem] leading-5 tracking-[-0.005em] text-foreground-strong",
+          "grid-cols-[minmax(0,1fr)]",
+          "has-[>svg]:grid-cols-[auto_minmax(0,1fr)]",
+          "has-[>[data-slot=banner-action]]:grid-cols-[minmax(0,1fr)_auto]",
+          "has-[>svg]:has-[>[data-slot=banner-action]]:grid-cols-[auto_minmax(0,1fr)_auto]",
+          "has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:items-start",
+          "has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:grid-rows-[auto_auto]",
+          "has-[>[data-slot=banner-title]]:has-[>[data-slot=banner-description]]:gap-y-1",
+          "[&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:self-center",
+        ],
+        title: [
+          "col-start-1 row-start-1 flex h-5 min-w-0 items-center text-[0.84375rem] font-medium leading-5 text-foreground-strong",
+          "group-has-[>svg]/banner:col-start-2",
+          "group-data-[size=sm]/banner:h-4 group-data-[size=sm]/banner:text-[0.8125rem] group-data-[size=sm]/banner:leading-4",
+          "group-data-[size=lg]/banner:h-6 group-data-[size=lg]/banner:text-[0.90625rem] group-data-[size=lg]/banner:leading-6",
+          "group-data-[status=warning]/banner:text-[oklch(0.476_0.114_61.907)]",
+        ],
+        description: [
+          "col-start-1 row-start-1 min-w-0 font-normal leading-4 text-foreground-muted",
+          "group-has-[>svg]/banner:col-start-2",
+          "group-has-[>[data-slot=banner-title]]/banner:row-start-2",
+          "group-data-[size=sm]/banner:text-xs group-data-[size=sm]/banner:leading-4",
+          "group-data-[size=lg]/banner:text-[0.875rem] group-data-[size=lg]/banner:leading-5",
+          "group-data-[status=warning]/banner:text-[oklch(0.476_0.114_61.907)]",
+        ],
+        action: [
+          "col-start-2 row-start-1 flex h-5 shrink-0 items-center gap-2",
+          "group-has-[>svg]/banner:col-start-3",
+          "group-has-[>[data-slot=banner-title]+[data-slot=banner-description]]/banner:row-span-2",
+          "[&>button:has(svg):last-child]:size-5 [&>button:has(svg):last-child]:min-h-5 [&>button:has(svg):last-child]:min-w-5",
+          "[&>button:has(svg):last-child]:rounded-sm",
+          "[&>button:has(svg):last-child]:border-transparent [&>button:has(svg):last-child]:bg-transparent [&>button:has(svg):last-child]:shadow-none",
+          "[&>button:has(svg):last-child]:text-current/45",
+          "[&>button:has(svg):last-child]:transition-colors [&>button:has(svg):last-child]:duration-200",
+          "[&>button:has(svg):last-child]:hover:border-transparent [&>button:has(svg):last-child]:hover:bg-foreground/5",
+          "[&>button:has(svg):last-child]:hover:text-current/70",
+          "[&>button:has(svg):last-child>svg]:size-4",
+          "group-data-[size=sm]/banner:h-4 group-data-[size=sm]/banner:[&>button:has(svg):last-child]:size-4",
+          "group-data-[size=sm]/banner:[&>button:has(svg):last-child]:min-h-4 group-data-[size=sm]/banner:[&>button:has(svg):last-child]:min-w-4",
+          "group-data-[size=sm]/banner:[&>button:has(svg):last-child>svg]:size-3",
+          "group-data-[size=lg]/banner:h-6 group-data-[size=lg]/banner:[&>button:has(svg):last-child]:size-6",
+          "group-data-[size=lg]/banner:[&>button:has(svg):last-child]:min-h-6 group-data-[size=lg]/banner:[&>button:has(svg):last-child]:min-w-6",
+        ],
+      },
+    },
+    status: {
+      default: {},
+      destructive: {},
+      warning: {},
+      info: {},
+      success: {},
+    },
+    size: {
+      sm: {},
+      md: {},
+      lg: {},
+    },
+    align: {
+      top: { action: "self-start" },
+      middle: { action: "self-center" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    align: "middle",
+  },
+  compoundVariants: [
+    { theme: "brutal", status: "default", class: { root: "bg-layer-panel" } },
+    { theme: "brutal", status: "destructive", class: { root: "bg-danger-base/20" } },
+    { theme: "brutal", status: "warning", class: { root: "bg-warning-base/20" } },
+    { theme: "brutal", status: "info", class: { root: "bg-primary-400/30" } },
+    { theme: "brutal", status: "success", class: { root: "bg-success-base/20" } },
+    {
+      theme: "brutal",
+      size: "sm",
+      class: { root: "gap-y-0 p-2 has-[>svg]:gap-x-2 has-[>[data-slot=banner-action]]:gap-x-2" },
+    },
+    {
+      theme: "brutal",
+      size: "md",
+      class: { root: "gap-y-0 p-3 has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3" },
+    },
+    {
+      theme: "brutal",
+      size: "lg",
+      class: {
+        root: "gap-y-0 p-4 shadow-sm has-[>svg]:gap-x-3 has-[>[data-slot=banner-action]]:gap-x-3",
+      },
+    },
+    {
+      theme: "elegant",
+      status: "default",
+      class: {
+        root: "bg-layer-muted [&>svg]:text-foreground-muted",
+      },
+    },
+    {
+      theme: "elegant",
+      status: "success",
+      class: {
+        root: "bg-[oklch(0.94_0.035_153.079)] [&>svg]:text-success-base",
+      },
+    },
+    {
+      theme: "elegant",
+      status: "warning",
+      class: {
+        root: "bg-[oklch(0.973_0.071_103.193)] text-[oklch(0.476_0.114_61.907)] [&>svg]:text-[oklch(0.476_0.114_61.907)]",
+      },
+    },
+    {
+      theme: "elegant",
+      status: "info",
+      class: {
+        root: "bg-info-lighter [&>svg]:text-[oklch(0.55_0.11_220)]",
+      },
+    },
+    {
+      theme: "elegant",
+      status: "destructive",
+      class: {
+        root: "bg-danger-lighter [&>svg]:text-danger-base",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "sm",
+      class: {
+        root: "py-2.5 pl-2.5 pr-2 text-xs leading-4 [&>svg]:size-3.5",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "md",
+      class: {
+        root: "px-3 py-3",
+      },
+    },
+    {
+      theme: "elegant",
+      size: "lg",
+      class: {
+        root: "gap-x-2 px-3.5 py-3 text-sm leading-5 [&>svg]:size-[18px]",
+      },
+    },
+  ],
+});
+
+export type BannerStatus = NonNullable<VariantProps<typeof banner>["status"]>;
+
+export type BannerProps = useRender.ComponentProps<"div"> &
+  Omit<VariantProps<typeof banner>, "theme" | "align"> & {
+    status: BannerStatus;
+  };
+
+export function Banner({ status, size = "md", className, render, ...props }: BannerProps) {
+  const theme = useThemeFamily();
+  const { root } = banner({ theme, status, size });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: root({ className }),
+    role: "alert",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "banner",
+      size,
+      status,
+    },
+  });
+}
+
+export type BannerTitleProps = useRender.ComponentProps<"div">;
+
+export function BannerTitle({ render, className, ...props }: BannerTitleProps) {
+  const theme = useThemeFamily();
+  const { title } = banner({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: title({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "banner-title",
+    },
+  });
+}
+
+export type BannerDescriptionProps = useRender.ComponentProps<"div">;
+
+export function BannerDescription({ render, className, ...props }: BannerDescriptionProps) {
+  const theme = useThemeFamily();
+  const { description } = banner({ theme });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: description({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "banner-description",
+    },
+  });
+}
+
+export type BannerActionProps = Omit<useRender.ComponentProps<"div">, "align"> &
+  Pick<VariantProps<typeof banner>, "align">;
+
+export function BannerAction({ align = "middle", render, className, ...props }: BannerActionProps) {
+  const theme = useThemeFamily();
+  const { action } = banner({ theme, align });
+  const defaultProps: useRender.ElementProps<"div"> = {
+    className: action({ className }),
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+    state: {
+      slot: "banner-action",
+      align,
+    },
+  });
+}

package/src/components/banner/index.ts

@@ -0,0 +1,8 @@
+export { Banner, BannerAction, BannerDescription, BannerTitle } from "./banner.tsx";
+export type {
+  BannerActionProps,
+  BannerDescriptionProps,
+  BannerProps,
+  BannerStatus,
+  BannerTitleProps,
+} from "./banner.tsx";