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

package/src/components/field.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import {Label} from "@repraze/kernelkit/components/label";
+import {Separator} from "@repraze/kernelkit/components/separator";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import {useMemo} from "react";
+
+function FieldSet({className, ...props}: React.ComponentProps<"fieldset">) {
+    return (
+        <fieldset
+            data-slot="field-set"
+            className={cn(
+                "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function FieldLegend({
+    className,
+    variant = "legend",
+    ...props
+}: React.ComponentProps<"legend"> & {variant?: "legend" | "label"}) {
+    return (
+        <legend
+            data-slot="field-legend"
+            data-variant={variant}
+            className={cn(
+                "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:font-heading data-[variant=legend]:text-base data-[variant=legend]:tracking-tight",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function FieldGroup({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="field-group"
+            className={cn(
+                "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:[&_[data-slot=field-label]]:text-danger", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal:
+                "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive:
+                "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+
+function Field({
+    className,
+    orientation = "vertical",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="field"
+            data-orientation={orientation}
+            className={cn(fieldVariants({orientation}), className)}
+            {...props}
+        />
+    );
+}
+
+function FieldContent({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="field-content"
+            className={cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className)}
+            {...props}
+        />
+    );
+}
+
+function FieldLabel({className, ...props}: React.ComponentProps<typeof Label>) {
+    return (
+        <Label
+            data-slot="field-label"
+            className={cn(
+                "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+                // choice card: a FieldLabel wrapping a Field with a checkbox / radio / switch
+                "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:border-input has-[>[data-slot=field]]:transition-[color,background-color,border-color,box-shadow] *:data-[slot=field]:p-3",
+                "has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-hover has-[>[data-slot=field]]:has-[:disabled,[data-disabled]]:opacity-50",
+                "has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50",
+                // checked: primary border + faint primary fill (§6: never shade alone)
+                "has-[>[data-slot=field]]:has-data-checked:border-primary-text has-[>[data-slot=field]]:has-data-checked:bg-primary/5 dark:has-[>[data-slot=field]]:has-data-checked:bg-primary/10",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function FieldTitle({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="field-label"
+            className={cn(
+                "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function FieldDescription({className, ...props}: React.ComponentProps<"p">) {
+    return (
+        <p
+            data-slot="field-description"
+            className={cn(
+                "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+                "last:mt-0 nth-last-2:-mt-1",
+                "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-text",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function FieldSeparator({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}) {
+    // Lines either side of the label instead of a label with a background: works on any surface.
+    return (
+        <div
+            data-slot="field-separator"
+            data-content={!!children}
+            className={cn(
+                "relative -my-2 flex h-5 items-center gap-2 text-sm group-data-[variant=outline]/field-group:-mb-2",
+                className,
+            )}
+            {...props}
+        >
+            <Separator className="flex-1" />
+            {children && (
+                <>
+                    <span className="shrink-0 text-muted-foreground" data-slot="field-separator-content">
+                        {children}
+                    </span>
+                    <Separator className="flex-1" />
+                </>
+            )}
+        </div>
+    );
+}
+
+function FieldError({
+    className,
+    children,
+    errors,
+    ...props
+}: React.ComponentProps<"div"> & {
+    errors?: Array<{message?: string} | undefined>;
+}) {
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+
+        if (!errors?.length) {
+            return null;
+        }
+
+        const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+
+        if (uniqueErrors?.length == 1) {
+            return uniqueErrors[0]?.message;
+        }
+
+        return (
+            <ul className="ml-4 flex list-disc flex-col gap-1">
+                {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+            </ul>
+        );
+    }, [children, errors]);
+
+    if (!content) {
+        return null;
+    }
+
+    return (
+        <div
+            role="alert"
+            data-slot="field-error"
+            className={cn("text-sm font-normal text-danger", className)}
+            {...props}
+        >
+            {content}
+        </div>
+    );
+}
+
+export {
+    Field,
+    FieldContent,
+    FieldDescription,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldLegend,
+    FieldSeparator,
+    FieldSet,
+    FieldTitle,
+};

package/src/components/file-upload.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import {buttonVariants} from "@repraze/kernelkit/components/button";
+import {Spinner} from "@repraze/kernelkit/components/spinner";
+import {focusRing, heading} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {UploadIcon} from "lucide-react";
+import * as React from "react";
+
+/** Drop zone classes, exported so other drop targets can share the look. */
+const fileUploadVariants = cva([
+    "group/upload relative flex cursor-pointer flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-input p-6 text-center text-balance select-none",
+    "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none",
+    focusRing,
+    "hover:bg-hover",
+    "data-drag-over:border-primary-text data-drag-over:bg-primary/5",
+    "aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40",
+    "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+    "data-loading:pointer-events-none data-loading:cursor-progress",
+]);
+
+interface FileUploadProps extends Omit<React.ComponentProps<"div">, "onChange" | "title"> {
+    /** Same as the file input's `accept` (".csv,application/json", "image/*"…). */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Shows a spinner and blocks new files while an upload runs. */
+    isLoading?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Replaces the default "Browse files" affordance. */
+    children?: React.ReactNode;
+    /** Called with the picked or dropped files (never empty). */
+    onChange?: (files: File[]) => void;
+    /** Name of the hidden file input, for native form posts. */
+    name?: string;
+}
+
+/** Drag-and-drop zone that also opens the file picker on click, Enter or Space. */
+function FileUpload({
+    accept,
+    multiple,
+    disabled,
+    isLoading,
+    title = "Upload files",
+    description,
+    children,
+    onChange,
+    name,
+    className,
+    ...props
+}: FileUploadProps) {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const inactive = disabled || isLoading;
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+
+    function handleFiles(fileList: FileList) {
+        const files = Array.from(fileList);
+        if (files.length > 0) {
+            onChange?.(multiple ? files : files.slice(0, 1));
+        }
+    }
+
+    function open() {
+        if (!inactive) {
+            inputRef.current?.click();
+        }
+    }
+
+    function handleDragOver(e: React.DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!inactive) {
+            setIsDragOver(true);
+        }
+    }
+
+    function handleDragLeave(e: React.DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        // ignore leaving into a child of the zone
+        if (e.currentTarget.contains(e.relatedTarget as Node | null)) {
+            return;
+        }
+        setIsDragOver(false);
+    }
+
+    function handleDrop(e: React.DragEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        if (!inactive && e.dataTransfer.files.length > 0) {
+            handleFiles(e.dataTransfer.files);
+        }
+    }
+
+    return (
+        <div
+            data-slot="file-upload"
+            data-drag-over={isDragOver || undefined}
+            data-disabled={disabled || undefined}
+            data-loading={isLoading || undefined}
+            role="button"
+            tabIndex={inactive ? -1 : 0}
+            aria-disabled={disabled || undefined}
+            aria-busy={isLoading || undefined}
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={description ? descriptionId : undefined}
+            className={cn(fileUploadVariants(), className)}
+            onClick={open}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    open();
+                }
+            }}
+            onDragOver={handleDragOver}
+            onDragEnter={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            {...props}
+        >
+            <input
+                ref={inputRef}
+                data-slot="file-upload-input"
+                type="file"
+                name={name}
+                accept={accept}
+                multiple={multiple}
+                disabled={inactive}
+                className="sr-only"
+                tabIndex={-1}
+                aria-hidden
+                onClick={(e) => e.stopPropagation()}
+                onChange={(e) => {
+                    if (e.target.files) {
+                        handleFiles(e.target.files);
+                        e.target.value = "";
+                    }
+                }}
+            />
+            <div data-slot="file-upload-header" className="flex max-w-sm flex-col items-center gap-1">
+                <div
+                    data-slot="file-upload-icon"
+                    className="mb-2 flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground transition-colors group-data-drag-over/upload:border-primary-text group-data-drag-over/upload:text-primary-text"
+                >
+                    {isLoading ? <Spinner /> : <UploadIcon className="pointer-events-none size-4 shrink-0" />}
+                </div>
+                {title ? (
+                    <p id={titleId} data-slot="file-upload-title" className={cn(heading, "text-sm")}>
+                        {title}
+                    </p>
+                ) : null}
+                {description ? (
+                    <p id={descriptionId} data-slot="file-upload-description" className="text-sm text-muted-foreground">
+                        {description}
+                    </p>
+                ) : null}
+            </div>
+            {isLoading
+                ? null
+                : (children ?? (
+                      // Visual affordance only: the whole zone is the button.
+                      <span
+                          data-slot="file-upload-browse"
+                          aria-hidden
+                          className={buttonVariants({variant: "outline", size: "sm", className: "pointer-events-none"})}
+                      >
+                          Browse files
+                      </span>
+                  ))}
+        </div>
+    );
+}
+
+export {FileUpload, fileUploadVariants};
+export type {FileUploadProps};

package/src/components/hero.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {cn} from "cn";
+import type * as React from "react";
+
+/**
+ * The suite's landing hero: a full-bleed band under the header (muted surface, bottom border) with
+ * centered content at the site width. The default backdrop is a dot grid fading out from the center;
+ * pass `background` to replace it (an animation, a canvas).
+ *
+ * ```tsx
+ * <Hero>
+ *   <HeroMedia><Logo /></HeroMedia>
+ *   <HeroEyebrow><Badge>v0.1</Badge></HeroEyebrow>
+ *   <HeroTitle>Components with a <span className="text-primary-text">kernel</span> of contrast.</HeroTitle>
+ *   <HeroDescription>…</HeroDescription>
+ *   <HeroActions><Button size="lg">Get started</Button></HeroActions>
+ * </Hero>
+ * ```
+ */
+interface HeroProps extends Omit<React.ComponentProps<"section">, "children"> {
+    children?: React.ReactNode;
+    /** Replaces the dot grid behind the content. `null` for none. */
+    background?: React.ReactNode;
+    /** Classes for the centered content column. */
+    contentClassName?: string;
+}
+
+function Hero({className, contentClassName, background, children, ...props}: HeroProps) {
+    return (
+        <section
+            data-slot="hero"
+            className={cn("relative isolate overflow-hidden border-b border-border bg-muted/40", className)}
+            {...props}
+        >
+            {background === undefined ? <HeroDots /> : background}
+            <div
+                className={cn(
+                    "relative mx-auto flex w-full max-w-(--kk-site-width) flex-col items-center gap-5 px-4 py-10 text-center md:px-6 md:py-14",
+                    contentClassName,
+                )}
+            >
+                {children}
+            </div>
+        </section>
+    );
+}
+
+/** The default backdrop: a faint 16px dot grid (12% foreground, so high contrast's bright borders don't
+ * shout behind the title), masked to fade toward the edges. */
+function HeroDots() {
+    return (
+        <div
+            aria-hidden
+            data-slot="hero-dots"
+            className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(color-mix(in_oklab,var(--foreground)_12%,transparent)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_at_center,black_20%,transparent_75%)]"
+        />
+    );
+}
+
+/** The brand mark or an illustration above the title. */
+function HeroMedia({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">(
+            {className: cn("flex items-center justify-center [&_svg]:shrink-0", className)},
+            props,
+        ),
+        render,
+        state: {slot: "hero-media"},
+    });
+}
+
+/** Badges above the title: version, status. */
+function HeroEyebrow({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex flex-wrap items-center justify-center gap-2", className)}, props),
+        render,
+        state: {slot: "hero-eyebrow"},
+    });
+}
+
+/** The page's one h1. Put the key word in `text-primary-text`. */
+function HeroTitle({className, render, ...props}: useRender.ComponentProps<"h1">) {
+    return useRender({
+        defaultTagName: "h1",
+        props: mergeProps<"h1">(
+            {
+                className: cn(
+                    "max-w-4xl font-heading text-4xl font-semibold tracking-tight text-balance md:text-5xl xl:text-6xl",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "hero-title"},
+    });
+}
+
+/** One or two sentences on what it is and who it is for. */
+function HeroDescription({className, render, ...props}: useRender.ComponentProps<"p">) {
+    return useRender({
+        defaultTagName: "p",
+        props: mergeProps<"p">(
+            {className: cn("max-w-2xl text-base text-pretty text-muted-foreground md:text-lg", className)},
+            props,
+        ),
+        render,
+        state: {slot: "hero-description"},
+    });
+}
+
+/** The calls to action: one primary (solid, size lg), at most one secondary (outline). */
+function HeroActions({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex flex-wrap items-center justify-center gap-2", className)}, props),
+        render,
+        state: {slot: "hero-actions"},
+    });
+}
+
+/** Under the actions: an install command, a swatch strip. */
+function HeroFooter({className, render, ...props}: useRender.ComponentProps<"div">) {
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps<"div">({className: cn("flex w-full flex-col items-center gap-3", className)}, props),
+        render,
+        state: {slot: "hero-footer"},
+    });
+}
+
+export {Hero, HeroActions, HeroDescription, HeroEyebrow, HeroFooter, HeroMedia, HeroTitle};

package/src/components/hover-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import {PreviewCard as PreviewCardPrimitive} from "@base-ui/react/preview-card";
+import {popupMotion, popupSurface} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+
+function HoverCard({...props}: PreviewCardPrimitive.Root.Props) {
+    return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({...props}: PreviewCardPrimitive.Trigger.Props) {
+    return <PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+function HoverCardContent({
+    className,
+    side = "bottom",
+    sideOffset = 4,
+    align = "center",
+    alignOffset = 0,
+    ...props
+}: PreviewCardPrimitive.Popup.Props &
+    Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+    return (
+        <PreviewCardPrimitive.Portal container={usePortalContainer()} data-slot="hover-card-portal">
+            <PreviewCardPrimitive.Positioner
+                align={align}
+                alignOffset={alignOffset}
+                side={side}
+                sideOffset={sideOffset}
+                className="isolate z-50"
+            >
+                <PreviewCardPrimitive.Popup
+                    data-slot="hover-card-content"
+                    className={cn(popupSurface, popupMotion, "z-50 w-64 p-3 text-sm outline-hidden", className)}
+                    {...props}
+                />
+            </PreviewCardPrimitive.Positioner>
+        </PreviewCardPrimitive.Portal>
+    );
+}
+
+export {HoverCard, HoverCardContent, HoverCardTrigger};