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

package/src/components/alert-dialog.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import {AlertDialog as AlertDialogPrimitive} from "@base-ui/react/alert-dialog";
+import {Button} from "@repraze/kernelkit/components/button";
+import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
+import {backdrop, heading} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import * as React from "react";
+
+function AlertDialog({...props}: AlertDialogPrimitive.Root.Props) {
+    return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({...props}: AlertDialogPrimitive.Trigger.Props) {
+    return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({...props}: AlertDialogPrimitive.Portal.Props) {
+    return <AlertDialogPrimitive.Portal container={usePortalContainer()} data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({className, ...props}: AlertDialogPrimitive.Backdrop.Props) {
+    return (
+        <AlertDialogPrimitive.Backdrop
+            data-slot="alert-dialog-overlay"
+            className={cn(backdrop, className)}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogContent({
+    className,
+    size = "default",
+    ...props
+}: AlertDialogPrimitive.Popup.Props & {
+    size?: "default" | "sm";
+}) {
+    return (
+        <AlertDialogPortal>
+            <AlertDialogOverlay />
+            <AlertDialogPrimitive.Popup
+                data-slot="alert-dialog-content"
+                data-size={size}
+                className={cn(
+                    "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-xl shadow-(color:--shadow-color) duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:animate-none",
+                    className,
+                )}
+                {...props}
+            />
+        </AlertDialogPortal>
+    );
+}
+
+function AlertDialogHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-dialog-header"
+            className={cn(
+                "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-dialog-footer"
+            className={cn(
+                "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t border-border bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+/** Icon tile. `color` tints it (TermiColor rule: tint surface, colored icon and border). */
+function AlertDialogMedia({
+    className,
+    color,
+    ...props
+}: Omit<React.ComponentProps<"div">, "color"> & {
+    color?: Color;
+}) {
+    return (
+        <div
+            data-slot="alert-dialog-media"
+            data-color={color}
+            className={cn(
+                "mb-2 inline-flex size-10 items-center justify-center rounded-lg border border-border bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
+                color && [colorVariants[color], "border-(--c)/40 bg-(--c-tint) text-foreground *:[svg]:text-(--c)"],
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogTitle({className, ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+    return (
+        <AlertDialogPrimitive.Title
+            data-slot="alert-dialog-title"
+            className={cn(
+                heading,
+                "text-base sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDialogDescription({className, ...props}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+    return (
+        <AlertDialogPrimitive.Description
+            data-slot="alert-dialog-description"
+            className={cn(
+                "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+/** The confirming action. A plain Button (it does not close the dialog): accepts `variant`, `color`, `size`. */
+function AlertDialogAction({className, ...props}: React.ComponentProps<typeof Button>) {
+    return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+    className,
+    variant = "outline",
+    color,
+    size = "default",
+    ...props
+}: Omit<AlertDialogPrimitive.Close.Props, "color"> &
+    Pick<React.ComponentProps<typeof Button>, "variant" | "color" | "size">) {
+    return (
+        <AlertDialogPrimitive.Close
+            data-slot="alert-dialog-cancel"
+            className={cn(className)}
+            render={<Button variant={variant} color={color} size={size} />}
+            {...props}
+        />
+    );
+}
+
+export {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogMedia,
+    AlertDialogOverlay,
+    AlertDialogPortal,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+};

package/src/components/alert.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
+import {heading} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+
+const alertCva = cva(
+    [
+        "group/alert relative grid w-full gap-0.5 rounded-lg border px-3 py-2.5 text-left text-sm",
+        "has-data-[slot=alert-action]:pr-20 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5",
+        "*:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg:not([class*='size-'])]:size-4",
+    ],
+    {
+        variants: {
+            color: colorVariants,
+            variant: {
+                // status tint behind foreground text; the hue lives in the border and the icon (§2 TermiColor rule)
+                soft: "border-(--c)/30 bg-(--c-tint) text-foreground *:[svg]:text-(--c) hc:border-(--c)",
+                // no wash: card surface with a hue border, for dense layouts
+                outline: "border-(--c)/50 bg-card text-card-foreground *:[svg]:text-(--c) hc:border-(--c)",
+            },
+        },
+        compoundVariants: [
+            {
+                color: "neutral",
+                class: "border-border bg-card text-card-foreground *:[svg]:text-foreground hc:border-border",
+            },
+        ],
+        defaultVariants: {variant: "soft", color: "neutral"},
+    },
+);
+
+type AlertVariant = "soft" | "outline" | "default" | "destructive";
+
+/** shadcn aliases: `default` = soft neutral, `destructive` = soft danger. */
+function resolveAlert(variant: AlertVariant | null | undefined, color: Color | null | undefined) {
+    if (variant === "destructive") {
+        return {variant: "soft" as const, color: color ?? "danger"};
+    }
+    return {variant: variant === "outline" ? ("outline" as const) : ("soft" as const), color: color ?? "neutral"};
+}
+
+/** Alert classes for any element. Accepts the shadcn `default` / `destructive` aliases. */
+function alertVariants({
+    variant,
+    color,
+    className,
+}: {variant?: AlertVariant | null; color?: Color | null; className?: string} = {}) {
+    return cn(alertCva(resolveAlert(variant, color)), className);
+}
+
+interface AlertProps extends Omit<useRender.ComponentProps<"div">, "color"> {
+    /** `soft` (tinted, default) or `outline`. shadcn aliases: `default` = soft, `destructive` = soft danger. */
+    variant?: AlertVariant | null;
+    /** Status or hue. Defaults to neutral (danger for `destructive`). */
+    color?: Color | null;
+}
+
+function Alert({className, variant, color, render, ...props}: AlertProps) {
+    const resolved = resolveAlert(variant, color);
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({role: "alert", className: cn(alertCva(resolved), className)}, props),
+        render,
+        state: {slot: "alert", variant: resolved.variant, color: resolved.color},
+    });
+}
+
+function AlertTitle({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-title"
+            className={cn(
+                heading,
+                "group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-(--c)",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertDescription({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-description"
+            className={cn(
+                "text-sm text-balance text-muted-foreground group-has-[>svg]/alert:col-start-2 md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AlertAction({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="alert-action"
+            className={cn("absolute top-2 right-2 flex items-center gap-1.5", className)}
+            {...props}
+        />
+    );
+}
+
+export {Alert, AlertAction, AlertDescription, AlertTitle, alertVariants};
+export type {AlertProps};

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {cn} from "cn";
+
+interface AspectRatioProps extends useRender.ComponentProps<"div"> {
+    /** Width / height, e.g. `16 / 9`. */
+    ratio: number;
+}
+
+/** Box that keeps a width/height ratio; children (img, video, iframe) fill it. */
+function AspectRatio({ratio, className, style, render, ...props}: AspectRatioProps) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {
+                style: {"--ratio": ratio, ...style} as React.CSSProperties,
+                className: cn("relative aspect-(--ratio)", className),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "aspect-ratio"},
+    });
+}
+
+export {AspectRatio};
+export type {AspectRatioProps};

package/src/components/attachment.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {Button} from "@repraze/kernelkit/components/button";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import * as React from "react";
+
+const attachmentVariants = cva(
+    [
+        "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border border-border bg-card text-card-foreground transition-[color,background-color,border-color,box-shadow] duration-100",
+        // A full-bleed AttachmentTrigger makes the whole card clickable: hover wash + keyboard ring on the card.
+        "has-[>[data-slot=attachment-trigger]]:hover:bg-hover has-[>[data-slot=attachment-trigger]:focus-visible]:border-ring has-[>[data-slot=attachment-trigger]:focus-visible]:ring-3 has-[>[data-slot=attachment-trigger]:focus-visible]:ring-ring/50",
+        "data-[state=error]:border-danger/50 data-[state=idle]:border-dashed data-[state=idle]:border-input data-[state=idle]:bg-transparent",
+    ],
+    {
+        variants: {
+            size: {
+                default:
+                    "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+                sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+                xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+            },
+            orientation: {
+                horizontal: "min-w-40 items-center",
+                vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+            },
+        },
+    },
+);
+
+type AttachmentProps = React.ComponentProps<"div"> &
+    VariantProps<typeof attachmentVariants> & {
+        /** `idle` = dashed drop slot, `uploading`/`processing` shimmer the title and dim image media. */
+        state?: "idle" | "uploading" | "processing" | "error" | "done";
+    };
+
+function Attachment({
+    className,
+    state = "done",
+    size = "default",
+    orientation = "horizontal",
+    ...props
+}: AttachmentProps) {
+    return (
+        <div
+            data-slot="attachment"
+            data-state={state}
+            data-size={size}
+            data-orientation={orientation}
+            className={cn(attachmentVariants({size, orientation}), className)}
+            {...props}
+        />
+    );
+}
+
+const attachmentMediaVariants = cva(
+    "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[orientation=vertical]/attachment:rounded-lg group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-sm group-data-[state=error]/attachment:bg-danger/12 group-data-[state=error]/attachment:text-danger group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+    {
+        variants: {
+            variant: {
+                icon: "",
+                image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+            },
+        },
+        defaultVariants: {
+            variant: "icon",
+        },
+    },
+);
+
+function AttachmentMedia({
+    className,
+    variant = "icon",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>) {
+    return (
+        <div
+            data-slot="attachment-media"
+            data-variant={variant}
+            className={cn(attachmentMediaVariants({variant}), className)}
+            {...props}
+        />
+    );
+}
+
+function AttachmentContent({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="attachment-content"
+            className={cn(
+                "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentTitle({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="attachment-title"
+            className={cn(
+                "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentDescription({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="attachment-description"
+            className={cn(
+                "mt-0.5 block max-w-full min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-danger",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentActions({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="attachment-actions"
+            className={cn(
+                "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentAction({className, variant, size = "icon-xs", ...props}: React.ComponentProps<typeof Button>) {
+    return (
+        <Button
+            data-slot="attachment-action"
+            variant={variant ?? "ghost"}
+            size={size}
+            className={cn(
+                "group-data-[orientation=vertical]/attachment:bg-background/85 group-data-[orientation=vertical]/attachment:backdrop-blur-xs",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AttachmentTrigger({className, render, type, ...props}: useRender.ComponentProps<"button">) {
+    return useRender({
+        defaultTagName: "button",
+        props: mergeProps<"button">(
+            {
+                type: render ? type : (type ?? "button"),
+                className: cn("absolute inset-0 z-10 outline-none", className),
+            },
+            props,
+        ),
+        render,
+        state: {
+            slot: "attachment-trigger",
+        },
+    });
+}
+
+function AttachmentGroup({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="attachment-group"
+            className={cn(
+                "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Attachment,
+    AttachmentAction,
+    AttachmentActions,
+    AttachmentContent,
+    AttachmentDescription,
+    AttachmentGroup,
+    AttachmentMedia,
+    attachmentMediaVariants,
+    AttachmentTitle,
+    AttachmentTrigger,
+    attachmentVariants,
+};
+export type {AttachmentProps};

package/src/components/avatar.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import {Avatar as AvatarPrimitive} from "@base-ui/react/avatar";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import * as React from "react";
+
+type AvatarSize = "xs" | "sm" | "default" | "lg";
+
+/** Pill-shaped (square at radius-none). Sizes: xs 16px, sm 24px, default 32px, lg 40px. */
+const avatarVariants = cva(
+    "group/avatar relative flex shrink-0 rounded-pill select-none after:pointer-events-none after:absolute after:inset-0 after:rounded-pill after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+    {
+        variants: {
+            size: {
+                xs: "size-4",
+                sm: "size-6",
+                default: "size-8",
+                lg: "size-10",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+function Avatar({
+    className,
+    size = "default",
+    ...props
+}: AvatarPrimitive.Root.Props & {
+    size?: AvatarSize;
+}) {
+    return (
+        <AvatarPrimitive.Root
+            data-slot="avatar"
+            data-size={size}
+            className={cn(avatarVariants({size}), className)}
+            {...props}
+        />
+    );
+}
+
+function AvatarImage({className, ...props}: AvatarPrimitive.Image.Props) {
+    return (
+        <AvatarPrimitive.Image
+            data-slot="avatar-image"
+            className={cn("aspect-square size-full rounded-pill object-cover", className)}
+            {...props}
+        />
+    );
+}
+
+function AvatarFallback({className, ...props}: AvatarPrimitive.Fallback.Props) {
+    return (
+        <AvatarPrimitive.Fallback
+            data-slot="avatar-fallback"
+            className={cn(
+                "flex size-full items-center justify-center rounded-pill bg-muted font-medium text-muted-foreground",
+                "text-sm group-data-[size=lg]/avatar:text-base group-data-[size=sm]/avatar:text-xs group-data-[size=xs]/avatar:text-[0.5rem]",
+                "[&>svg]:size-4 group-data-[size=lg]/avatar:[&>svg]:size-5 group-data-[size=sm]/avatar:[&>svg]:size-3 group-data-[size=xs]/avatar:[&>svg]:size-2.5",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarBadge({className, ...props}: React.ComponentProps<"span">) {
+    return (
+        <span
+            data-slot="avatar-badge"
+            className={cn(
+                "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-pill bg-primary text-primary-foreground ring-2 ring-background select-none",
+                "group-data-[size=xs]/avatar:size-1.5 group-data-[size=xs]/avatar:[&>svg]:hidden",
+                "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+                "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+                "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroup({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group"
+            className={cn(
+                "group/avatar-group flex -space-x-2 has-data-[size=sm]:-space-x-1.5 has-data-[size=xs]:-space-x-1 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function AvatarGroupCount({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="avatar-group-count"
+            className={cn(
+                "relative flex size-8 shrink-0 items-center justify-center rounded-pill bg-muted font-mono text-xs font-medium text-muted-foreground ring-2 ring-background [&>svg]:size-4",
+                "group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-sm group-has-data-[size=lg]/avatar-group:[&>svg]:size-5",
+                "group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-[0.625rem] group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+                "group-has-data-[size=xs]/avatar-group:size-4 group-has-data-[size=xs]/avatar-group:text-[0.5rem] group-has-data-[size=xs]/avatar-group:[&>svg]:size-2",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, avatarVariants};
+export type {AvatarSize};