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

package/src/components/menubar.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import {Menubar as MenubarPrimitive} from "@base-ui/react/menubar";
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from "@repraze/kernelkit/components/dropdown-menu";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cn} from "cn";
+import * as React from "react";
+
+/** Bordered bar at the control height (GUIDELINES §4); triggers sit inside its 3px padding. */
+function Menubar({className, ...props}: MenubarPrimitive.Props) {
+    return (
+        <MenubarPrimitive
+            data-slot="menubar"
+            className={cn(
+                "flex h-8 w-fit items-center gap-0.5 rounded-lg border border-border bg-background p-[3px]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MenubarMenu({...props}: React.ComponentProps<typeof DropdownMenu>) {
+    return <DropdownMenu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({...props}: React.ComponentProps<typeof DropdownMenuGroup>) {
+    return <DropdownMenuGroup data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({...props}: React.ComponentProps<typeof DropdownMenuPortal>) {
+    return <DropdownMenuPortal data-slot="menubar-portal" {...props} />;
+}
+
+/** Top-level menu button: hover wash, kept while its menu is open. */
+function MenubarTrigger({className, ...props}: React.ComponentProps<typeof DropdownMenuTrigger>) {
+    return (
+        <DropdownMenuTrigger
+            data-slot="menubar-trigger"
+            className={cn(
+                "flex h-full items-center gap-1.5 rounded-md px-2 text-sm font-medium select-none",
+                "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+                focusRing,
+                "hover:bg-hover data-popup-open:bg-hover disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
+                "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MenubarContent({
+    className,
+    align = "start",
+    alignOffset = -4,
+    sideOffset = 8,
+    ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+    return (
+        <DropdownMenuContent
+            data-slot="menubar-content"
+            align={align}
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
+            className={cn("w-auto min-w-48", className)}
+            {...props}
+        />
+    );
+}
+
+// Rows come from dropdown-menu (listItem recipe); only the data-slot changes.
+function MenubarItem({...props}: React.ComponentProps<typeof DropdownMenuItem>) {
+    return <DropdownMenuItem data-slot="menubar-item" {...props} />;
+}
+
+function MenubarCheckboxItem({...props}: React.ComponentProps<typeof DropdownMenuCheckboxItem>) {
+    return <DropdownMenuCheckboxItem data-slot="menubar-checkbox-item" {...props} />;
+}
+
+function MenubarRadioGroup({...props}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
+    return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />;
+}
+
+function MenubarRadioItem({...props}: React.ComponentProps<typeof DropdownMenuRadioItem>) {
+    return <DropdownMenuRadioItem data-slot="menubar-radio-item" {...props} />;
+}
+
+function MenubarLabel({...props}: React.ComponentProps<typeof DropdownMenuLabel>) {
+    return <DropdownMenuLabel data-slot="menubar-label" {...props} />;
+}
+
+function MenubarSeparator({...props}: React.ComponentProps<typeof DropdownMenuSeparator>) {
+    return <DropdownMenuSeparator data-slot="menubar-separator" {...props} />;
+}
+
+function MenubarShortcut({...props}: React.ComponentProps<typeof DropdownMenuShortcut>) {
+    return <DropdownMenuShortcut data-slot="menubar-shortcut" {...props} />;
+}
+
+function MenubarSub({...props}: React.ComponentProps<typeof DropdownMenuSub>) {
+    return <DropdownMenuSub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({...props}: React.ComponentProps<typeof DropdownMenuSubTrigger>) {
+    return <DropdownMenuSubTrigger data-slot="menubar-sub-trigger" {...props} />;
+}
+
+function MenubarSubContent({...props}: React.ComponentProps<typeof DropdownMenuSubContent>) {
+    return <DropdownMenuSubContent data-slot="menubar-sub-content" {...props} />;
+}
+
+export {
+    Menubar,
+    MenubarCheckboxItem,
+    MenubarContent,
+    MenubarGroup,
+    MenubarItem,
+    MenubarLabel,
+    MenubarMenu,
+    MenubarPortal,
+    MenubarRadioGroup,
+    MenubarRadioItem,
+    MenubarSeparator,
+    MenubarShortcut,
+    MenubarSub,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarTrigger,
+};

package/src/components/message-scroller.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {
+    MessageScroller as MessageScrollerPrimitive,
+    useMessageScroller,
+    useMessageScrollerScrollable,
+    useMessageScrollerVisibility,
+} from "@shadcn/react/message-scroller";
+import {cn} from "cn";
+import {ArrowDownIcon} from "lucide-react";
+import * as React from "react";
+
+function MessageScrollerProvider(props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>) {
+    return <MessageScrollerPrimitive.Provider {...props} />;
+}
+
+function MessageScroller({className, ...props}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {
+    return (
+        <MessageScrollerPrimitive.Root
+            data-slot="message-scroller"
+            className={cn("group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden", className)}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerViewport({
+    className,
+    ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {
+    return (
+        <MessageScrollerPrimitive.Viewport
+            data-slot="message-scroller-viewport"
+            className={cn(
+                "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerContent({className, ...props}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {
+    return (
+        <MessageScrollerPrimitive.Content
+            data-slot="message-scroller-content"
+            className={cn("flex h-max min-h-full flex-col gap-6", className)}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerItem({
+    className,
+    scrollAnchor = false,
+    ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {
+    return (
+        <MessageScrollerPrimitive.Item
+            data-slot="message-scroller-item"
+            scrollAnchor={scrollAnchor}
+            className={cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className)}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerButton({
+    direction = "end",
+    className,
+    children,
+    render,
+    variant = "outline",
+    size = "icon-sm",
+    ...props
+}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &
+    Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+    return (
+        <MessageScrollerPrimitive.Button
+            data-slot="message-scroller-button"
+            data-direction={direction}
+            data-variant={variant}
+            data-size={size}
+            direction={direction}
+            className={cn(
+                "absolute inset-s-1/2 z-10 -translate-x-1/2 rounded-pill bg-background shadow-md dark:bg-background dark:hover:bg-hover shadow-(color:--shadow-color) transition-[translate,scale,opacity,background-color] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180 motion-reduce:transition-none",
+                className,
+            )}
+            render={render ?? <Button variant={variant} size={size} />}
+            {...props}
+        >
+            {children ?? (
+                <>
+                    <ArrowDownIcon />
+                    <span className="sr-only">{direction === "end" ? "Scroll to end" : "Scroll to start"}</span>
+                </>
+            )}
+        </MessageScrollerPrimitive.Button>
+    );
+}
+
+export {
+    MessageScroller,
+    MessageScrollerButton,
+    MessageScrollerContent,
+    MessageScrollerItem,
+    MessageScrollerProvider,
+    MessageScrollerViewport,
+    useMessageScroller,
+    useMessageScrollerScrollable,
+    useMessageScrollerVisibility,
+};

package/src/components/message.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import {cn} from "cn";
+import * as React from "react";
+
+function MessageGroup({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="message-group" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />;
+}
+
+type MessageProps = React.ComponentProps<"div"> & {
+    /** `end` mirrors the row: avatar on the right, bubbles and footer aligned to the end (the user's side). */
+    align?: "start" | "end";
+};
+
+function Message({className, align = "start", ...props}: MessageProps) {
+    return (
+        <div
+            data-slot="message"
+            data-align={align}
+            className={cn(
+                "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageAvatar({
+    className,
+    side = "bottom",
+    ...props
+}: React.ComponentProps<"div"> & {
+    /** `bottom` pins next to the last bubble (chat style); `top` sits by the header, for long assistant replies. */
+    side?: "top" | "bottom";
+}) {
+    return (
+        <div
+            data-slot="message-avatar"
+            data-side={side}
+            className={cn(
+                "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-pill data-[side=bottom]:group-has-data-[slot=message-footer]/message:-translate-y-8 data-[side=top]:self-start",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageContent({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="message-content"
+            className={cn(
+                "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="message-header"
+            className={cn(
+                "flex max-w-full min-w-0 items-center gap-1.5 px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-mono [&_time]:font-normal [&_time]:tabular-nums",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="message-footer"
+            className={cn(
+                "flex max-w-full min-w-0 items-center gap-1 px-3 text-xs text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 [&_time]:font-mono [&_time]:tabular-nums",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader};
+export type {MessageProps};

package/src/components/meter.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import {Meter as MeterPrimitive} from "@base-ui/react/meter";
+import {
+    progressIndicatorClass,
+    type ProgressSize,
+    progressTrackClass,
+    progressVariants,
+} from "@repraze/kernelkit/components/progress";
+import type {Color} from "@repraze/kernelkit/lib/color";
+import {cn} from "cn";
+
+interface MeterProps extends Omit<MeterPrimitive.Root.Props, "color"> {
+    /** Indicator color. Defaults to primary; pass a status color for thresholds. */
+    color?: Color | null;
+    /** Track height: sm `h-1`, default `h-1.5`, lg `h-2`. */
+    size?: ProgressSize | null;
+}
+
+/** A static measurement within a known range (disk usage, quota, battery). For task completion use Progress. */
+function Meter({className, children, color, size, ...props}: MeterProps) {
+    const resolvedColor = color ?? "primary";
+    const resolvedSize = size ?? "default";
+    return (
+        <MeterPrimitive.Root
+            data-slot="meter"
+            data-color={resolvedColor}
+            data-size={resolvedSize}
+            className={cn(progressVariants({color: resolvedColor, size: resolvedSize}), className)}
+            {...props}
+        >
+            {children}
+            <MeterTrack>
+                <MeterIndicator />
+            </MeterTrack>
+        </MeterPrimitive.Root>
+    );
+}
+
+function MeterTrack({className, ...props}: MeterPrimitive.Track.Props) {
+    return <MeterPrimitive.Track data-slot="meter-track" className={cn(progressTrackClass, className)} {...props} />;
+}
+
+function MeterIndicator({className, ...props}: MeterPrimitive.Indicator.Props) {
+    return (
+        <MeterPrimitive.Indicator
+            data-slot="meter-indicator"
+            className={cn(progressIndicatorClass, className)}
+            {...props}
+        />
+    );
+}
+
+function MeterLabel({className, ...props}: MeterPrimitive.Label.Props) {
+    return <MeterPrimitive.Label data-slot="meter-label" className={cn("text-sm font-medium", className)} {...props} />;
+}
+
+function MeterValue({className, ...props}: MeterPrimitive.Value.Props) {
+    return (
+        <MeterPrimitive.Value
+            data-slot="meter-value"
+            className={cn("ms-auto font-mono text-xs text-muted-foreground tabular-nums", className)}
+            {...props}
+        />
+    );
+}
+
+export {Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue};
+export type {MeterProps};

package/src/components/native-select.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import {fieldSurface, focusRing, invalidRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {ChevronDownIcon} from "lucide-react";
+import * as React from "react";
+
+const nativeSelectVariants = cva(
+    [
+        fieldSurface,
+        focusRing,
+        invalidRing,
+        "w-full min-w-0 appearance-none py-0 pr-8 pl-2.5 text-sm outline-none select-none hover:bg-field-hover disabled:pointer-events-none",
+    ],
+    {
+        variants: {
+            size: {
+                sm: "h-7 rounded-md pr-7 text-[0.8rem]",
+                default: "h-8",
+                lg: "h-9 pl-3 pr-9",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+    size?: "sm" | "default" | "lg";
+};
+
+/** A styled `<select>`: the platform picker, for long lists on mobile or forms without JS. */
+function NativeSelect({className, size = "default", ...props}: NativeSelectProps) {
+    return (
+        <div
+            className={cn("group/native-select relative w-fit has-[select:disabled]:opacity-50", className)}
+            data-slot="native-select-wrapper"
+            data-size={size}
+        >
+            <select
+                data-slot="native-select"
+                data-size={size}
+                className={cn(nativeSelectVariants({size}), "disabled:opacity-100")}
+                {...props}
+            />
+            <ChevronDownIcon
+                className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-muted-foreground select-none group-data-[size=lg]/native-select:right-2.5 group-data-[size=sm]/native-select:right-1.5 group-data-[size=sm]/native-select:size-3.5"
+                aria-hidden="true"
+                data-slot="native-select-icon"
+            />
+        </div>
+    );
+}
+
+function NativeSelectOption({className, ...props}: React.ComponentProps<"option">) {
+    return (
+        <option
+            data-slot="native-select-option"
+            className={cn("bg-popover text-popover-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+function NativeSelectOptGroup({className, ...props}: React.ComponentProps<"optgroup">) {
+    return (
+        <optgroup
+            data-slot="native-select-optgroup"
+            className={cn("bg-popover text-popover-foreground", className)}
+            {...props}
+        />
+    );
+}
+
+export {NativeSelect, NativeSelectOptGroup, NativeSelectOption, nativeSelectVariants};
+export type {NativeSelectProps};

package/src/components/navbar.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {cn} from "cn";
+
+/** Sticky top bar: translucent background over a blur, one bottom line. */
+function Navbar({className, render, ...props}: useRender.ComponentProps<"header">) {
+    return useRender({
+        defaultTagName: "header",
+        props: mergeProps<"header">(
+            {
+                className: cn(
+                    "sticky top-0 z-40 w-full border-b border-border bg-background/85 text-foreground supports-backdrop-filter:backdrop-blur-md",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "navbar"},
+    });
+}
+
+/** The bar's row: `h-14`, horizontal padding, items centered. Constrain its width here (`max-w-*`). */
+function NavbarContent({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex h-14 items-center gap-2 px-4", className)}, props),
+        render,
+        state: {slot: "navbar-content"},
+    });
+}
+
+/** A cluster of items (brand, links, actions). Push one to the end with `ml-auto`. */
+function NavbarSection({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex items-center gap-2", className)}, props),
+        render,
+        state: {slot: "navbar-section"},
+    });
+}
+
+/** Holds the primary links or a `NavigationMenu`. Defaults to a `<nav>`. */
+function NavbarMenu({className, render, ...props}: useRender.ComponentProps<"nav">) {
+    return useRender({
+        defaultTagName: "nav",
+        props: mergeProps<"nav">({className: cn("flex items-center gap-1", className)}, props),
+        render,
+        state: {slot: "navbar-menu"},
+    });
+}
+
+export {Navbar, NavbarContent, NavbarMenu, NavbarSection};