@repraze/kernelkit 0.0.0-stage → 0.1.0-alpha.0

package/src/components/badge.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {
+    type Color,
+    colorVariants,
+    type FillVariant,
+    type FillVariantAlias,
+    resolveFill,
+    TINTED_COLORS,
+} from "@repraze/kernelkit/lib/color";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+
+const badgeCva = cva(
+    [
+        "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow]",
+        "has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!",
+        focusRing,
+    ],
+    {
+        variants: {
+            color: colorVariants,
+            variant: {
+                solid: "bg-(--c-fill) text-(--c-fill-fg) [a]:hover:bg-(--c-fill)/85",
+                soft: "bg-(--c)/12 text-(--c) dark:bg-(--c)/20 [a]:hover:bg-(--c)/20 dark:[a]:hover:bg-(--c)/30",
+                outline: "border-border text-foreground [a]:hover:bg-hover",
+                ghost: "text-foreground [a]:hover:bg-hover",
+                link: "text-(--c) underline-offset-4 hover:underline",
+            },
+        },
+        compoundVariants: [
+            {
+                variant: "solid",
+                color: "neutral",
+                class: "bg-secondary text-secondary-foreground hc:border-input [a]:hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)]",
+            },
+            {variant: "soft", color: "neutral", class: "bg-(--c)/6 text-foreground dark:bg-(--c)/8"},
+            {variant: "outline", color: [...TINTED_COLORS], class: "border-(--c)/40 text-(--c) [a]:hover:bg-(--c)/10"},
+            {variant: "ghost", color: [...TINTED_COLORS], class: "text-(--c) [a]:hover:bg-(--c)/10"},
+        ],
+        defaultVariants: {variant: "solid", color: "primary"},
+    },
+);
+
+/** Badge classes for any element. Accepts the shadcn aliases and default colors. */
+function badgeVariants({
+    variant,
+    color,
+    className,
+}: {variant?: FillVariant | FillVariantAlias | null; color?: Color | null; className?: string} = {}) {
+    return cn(badgeCva(resolveFill(variant, color)), className);
+}
+
+interface BadgeProps extends Omit<useRender.ComponentProps<"span">, "color"> {
+    /** Fill style. `default` / `secondary` / `destructive` are shadcn aliases. */
+    variant?: FillVariant | FillVariantAlias | null;
+    /** Defaults to the variant's natural color: primary for solid/soft/link, neutral for outline/ghost. */
+    color?: Color | null;
+}
+
+function Badge({className, variant, color, render, ...props}: BadgeProps) {
+    const fill = resolveFill(variant, color);
+    return useRender({
+        defaultTagName: "span",
+        props: mergeProps<"span">({className: cn(badgeCva(fill), className)}, props),
+        render,
+        state: {slot: "badge", variant: fill.variant, color: fill.color},
+    });
+}
+
+export {Badge, badgeVariants};
+export type {BadgeProps};

package/src/components/breadcrumb.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cn} from "cn";
+import {ChevronRightIcon, MoreHorizontalIcon} from "lucide-react";
+import * as React from "react";
+
+function Breadcrumb({className, ...props}: React.ComponentProps<"nav">) {
+    return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />;
+}
+
+function BreadcrumbList({className, ...props}: React.ComponentProps<"ol">) {
+    return (
+        <ol
+            data-slot="breadcrumb-list"
+            className={cn(
+                "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbItem({className, ...props}: React.ComponentProps<"li">) {
+    return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+function BreadcrumbLink({className, render, ...props}: useRender.ComponentProps<"a">) {
+    return useRender({
+        defaultTagName: "a",
+        props: mergeProps<"a">(
+            {
+                className: cn(
+                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                    focusRing,
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {
+            slot: "breadcrumb-link",
+        },
+    });
+}
+
+function BreadcrumbPage({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="breadcrumb-page"
+            role="link"
+            aria-disabled="true"
+            aria-current="page"
+            className={cn(
+                "inline-flex items-center gap-1 font-medium text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function BreadcrumbSeparator({children, className, ...props}: React.ComponentProps<"li">) {
+    return (
+        <li
+            data-slot="breadcrumb-separator"
+            role="presentation"
+            aria-hidden="true"
+            className={cn("text-muted-foreground [&>svg]:size-3.5", className)}
+            {...props}
+        >
+            {children ?? <ChevronRightIcon />}
+        </li>
+    );
+}
+
+function BreadcrumbEllipsis({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="breadcrumb-ellipsis"
+            role="presentation"
+            aria-hidden="true"
+            className={cn("flex size-5 items-center justify-center rounded-sm [&>svg]:size-4", className)}
+            {...props}
+        >
+            <MoreHorizontalIcon />
+            <span className="sr-only">More</span>
+        </span>
+    );
+}
+
+export {
+    Breadcrumb,
+    BreadcrumbEllipsis,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+};

package/src/components/bubble.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import * as React from "react";
+
+function BubbleGroup({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="bubble-group" className={cn("flex min-w-0 flex-col gap-1", className)} {...props} />;
+}
+
+// Grey surface variants carry a border: light secondary/muted sit within a few % of the background, and
+// high contrast flattens surface shades entirely.
+// Variants paint the child `bubble-content`, so a clickable content (`render={<button />}`) gets the hover.
+// Literal strings on purpose: Tailwind only generates classes it can read in the source.
+const bubbleVariants = cva(
+    "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+    {
+        variants: {
+            variant: {
+                default:
+                    "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/85",
+                secondary:
+                    "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)]",
+                muted: "*:data-[slot=bubble-content]:bg-muted *:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:border-border [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_8%)]",
+                tinted: "*:data-[slot=bubble-content]:bg-accent *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--accent),var(--foreground)_8%)]",
+                outline:
+                    "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-hover",
+                ghost: "*:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-hover",
+                destructive:
+                    "*:data-[slot=bubble-content]:bg-danger/12 *:data-[slot=bubble-content]:text-danger dark:*:data-[slot=bubble-content]:bg-danger/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-danger/30",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+type BubbleProps = React.ComponentProps<"div"> &
+    VariantProps<typeof bubbleVariants> & {
+        /** Side the bubble sits on. Inside `<Message align="end">` it follows the message. */
+        align?: "start" | "end";
+    };
+
+function Bubble({variant = "default", align = "start", className, ...props}: BubbleProps) {
+    return (
+        <div
+            data-slot="bubble"
+            data-variant={variant}
+            data-align={align}
+            className={cn(bubbleVariants({variant}), className)}
+            {...props}
+        />
+    );
+}
+
+const bubbleContentVariants = cva([
+    "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word",
+    // Tail: the corner pointing at the speaker is tighter (bottom-start, or bottom-end on the end side).
+    "rounded-es-sm group-data-[align=end]/bubble:self-end group-data-[align=end]/bubble:rounded-es-xl group-data-[align=end]/bubble:rounded-ee-sm group-data-[align=end]/message:rounded-es-xl group-data-[align=end]/message:rounded-ee-sm",
+    "[button]:text-left [button,a]:cursor-pointer [button,a]:transition-[color,background-color,border-color,box-shadow] [button,a]:duration-100",
+    focusRing,
+]);
+
+function BubbleContent({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn(bubbleContentVariants(), className)}, props),
+        render,
+        state: {
+            slot: "bubble-content",
+        },
+    });
+}
+
+const bubbleReactionsVariants = cva(
+    "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-pill border border-border bg-popover px-1.5 py-0.5 text-xs text-popover-foreground shadow-sm shadow-(color:--shadow-color) has-[button]:p-0",
+    {
+        variants: {
+            side: {
+                top: "top-0 -translate-y-3/4",
+                bottom: "bottom-0 translate-y-3/4",
+            },
+            align: {
+                start: "left-3",
+                end: "right-3",
+            },
+        },
+        defaultVariants: {
+            side: "bottom",
+            align: "end",
+        },
+    },
+);
+
+function BubbleReactions({
+    side = "bottom",
+    align = "end",
+    className,
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof bubbleReactionsVariants>) {
+    return (
+        <div
+            data-slot="bubble-reactions"
+            data-align={align}
+            data-side={side}
+            className={cn(bubbleReactionsVariants({side, align}), className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Bubble,
+    BubbleContent,
+    bubbleContentVariants,
+    BubbleGroup,
+    BubbleReactions,
+    bubbleReactionsVariants,
+    bubbleVariants,
+};
+export type {BubbleProps};

package/src/components/button-group.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {Separator} from "@repraze/kernelkit/components/separator";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+
+const buttonGroupVariants = cva(
+    "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    {
+        variants: {
+            orientation: {
+                horizontal:
+                    "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+                vertical:
+                    "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+            },
+        },
+        defaultVariants: {
+            orientation: "horizontal",
+        },
+    },
+);
+
+function ButtonGroup({
+    className,
+    orientation,
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="button-group"
+            data-orientation={orientation}
+            className={cn(buttonGroupVariants({orientation}), className)}
+            {...props}
+        />
+    );
+}
+
+function ButtonGroupText({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {
+                className: cn(
+                    "flex items-center gap-2 rounded-lg border border-input bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {
+            slot: "button-group-text",
+        },
+    });
+}
+
+function ButtonGroupSeparator({className, orientation = "vertical", ...props}: React.ComponentProps<typeof Separator>) {
+    return (
+        <Separator
+            data-slot="button-group-separator"
+            orientation={orientation}
+            className={cn(
+                "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants};

package/src/components/button.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import {Button as ButtonPrimitive} from "@base-ui/react/button";
+import {
+    type Color,
+    colorVariants,
+    type FillVariant,
+    type FillVariantAlias,
+    resolveFill,
+    TINTED_COLORS,
+} from "@repraze/kernelkit/lib/color";
+import {focusRing, invalidRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+
+const buttonCva = cva(
+    [
+        "group/button relative inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap select-none",
+        "transition-[color,background-color,border-color,box-shadow,translate] duration-100 active:not-aria-[haspopup]:translate-y-px motion-reduce:transition-none",
+        "disabled:pointer-events-none disabled:opacity-50 aria-busy:pointer-events-none",
+        focusRing,
+        invalidRing,
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    ],
+    {
+        variants: {
+            color: colorVariants,
+            variant: {
+                solid: "bg-(--c-fill) text-(--c-fill-fg) hover:bg-(--c-fill)/85 aria-expanded:bg-(--c-fill)/85",
+                soft: "bg-(--c)/12 text-(--c) hover:bg-(--c)/20 aria-expanded:bg-(--c)/20 dark:bg-(--c)/20 dark:hover:bg-(--c)/30",
+                outline: "border-input bg-transparent hover:bg-hover aria-expanded:bg-hover",
+                ghost: "text-foreground hover:bg-hover aria-expanded:bg-hover",
+                link: "text-(--c) underline-offset-4 hover:underline",
+            },
+            size: {
+                default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+                xs: "h-6 gap-1 rounded-md px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+                sm: "h-7 gap-1 rounded-md px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+                lg: "h-9 gap-2 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+                icon: "size-8",
+                "icon-xs":
+                    "size-6 rounded-md in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+                "icon-sm":
+                    "size-7 rounded-md in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3.5",
+                "icon-lg": "size-9",
+            },
+        },
+        compoundVariants: [
+            // neutral solid is the shadcn "secondary" button: a quiet surface, not a foreground fill
+            {
+                variant: "solid",
+                color: "neutral",
+                class: "bg-secondary text-secondary-foreground hc:border-input hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)] aria-expanded:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_8%)]",
+            },
+            // neutral soft sits below neutral solid in the hierarchy: a faint wash, not a darker grey
+            {
+                variant: "soft",
+                color: "neutral",
+                class: "bg-(--c)/6 text-foreground hover:bg-(--c)/10 aria-expanded:bg-(--c)/10 dark:bg-(--c)/8 dark:hover:bg-(--c)/12",
+            },
+            // tinted outline / ghost: hue border and text over the neutral chrome
+            {
+                variant: "outline",
+                color: [...TINTED_COLORS],
+                class: "border-(--c)/40 bg-transparent text-(--c) hover:bg-(--c)/10 aria-expanded:bg-(--c)/10",
+            },
+            {
+                variant: "ghost",
+                color: [...TINTED_COLORS],
+                class: "text-(--c) hover:bg-(--c)/10 aria-expanded:bg-(--c)/10",
+            },
+        ],
+        defaultVariants: {
+            variant: "solid",
+            color: "primary",
+            size: "default",
+        },
+    },
+);
+
+type ButtonSize = NonNullable<Parameters<typeof buttonCva>[0]>["size"];
+
+/** Button classes for any element (links, triggers…). Accepts the shadcn aliases and default colors. */
+function buttonVariants({
+    variant,
+    color,
+    size,
+    className,
+}: {
+    variant?: FillVariant | FillVariantAlias | null;
+    color?: Color | null;
+    size?: ButtonSize;
+    className?: string;
+} = {}) {
+    return cn(buttonCva({...resolveFill(variant, color), size}), className);
+}
+
+interface ButtonProps extends Omit<ButtonPrimitive.Props, "color"> {
+    /** Fill style. `default` / `secondary` / `destructive` are shadcn aliases. */
+    variant?: FillVariant | FillVariantAlias | null;
+    /** Defaults to the variant's natural color: primary for solid/soft/link, neutral for outline/ghost. */
+    color?: Color | null;
+    size?: ButtonSize;
+}
+
+function Button({className, variant, color, size = "default", nativeButton, render, ...props}: ButtonProps) {
+    const fill = resolveFill(variant, color);
+    return (
+        <ButtonPrimitive
+            data-slot="button"
+            data-variant={fill.variant}
+            data-color={fill.color}
+            data-size={size}
+            className={cn(buttonCva({...fill, size}), className)}
+            // A `render` element is usually a link: let Base UI drop button semantics for it.
+            nativeButton={nativeButton ?? render === undefined}
+            render={render}
+            {...props}
+        />
+    );
+}
+
+export {Button, buttonVariants};
+export type {ButtonProps};