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

package/src/components/checkbox.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import {Checkbox as CheckboxPrimitive} from "@base-ui/react/checkbox";
+import {focusRing} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {CheckIcon, MinusIcon} from "lucide-react";
+
+/** Box classes, exported so a custom element can look like a checkbox. */
+const checkboxVariants = cva([
+    "group/checkbox peer relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-(--checkbox-radius) border border-input bg-transparent text-primary-foreground [--checkbox-radius:min(var(--radius-sm),var(--spacing))]",
+    "transition-[color,background-color,border-color,box-shadow] duration-100 motion-reduce:transition-none bg-field",
+    // 24px hit area around the 16px box (§4)
+    "after:absolute after:-inset-x-3 after:-inset-y-2",
+    focusRing,
+    "hover:bg-field-hover",
+    "data-checked:border-primary data-checked:bg-primary data-checked:hover:bg-primary/85",
+    "data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:hover:bg-primary/85",
+    "aria-invalid:border-danger aria-invalid:ring-3 aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-field group-has-disabled/field:opacity-50",
+    // inside a FieldLabel card the label shows focus, not the box
+    "group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary",
+]);
+
+function Checkbox({className, ...props}: CheckboxPrimitive.Root.Props) {
+    return (
+        <CheckboxPrimitive.Root data-slot="checkbox" className={cn(checkboxVariants(), className)} {...props}>
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+            >
+                <CheckIcon strokeWidth={3} className="group-data-indeterminate/checkbox:hidden" />
+                <MinusIcon strokeWidth={3} className="hidden group-data-indeterminate/checkbox:block" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    );
+}
+
+export {Checkbox, checkboxVariants};

package/src/components/code-block.tsx

@@ -0,0 +1,246 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {cva, type VariantProps} from "class-variance-authority";
+import {cn} from "cn";
+import {CheckIcon, CopyIcon} from "lucide-react";
+import * as React from "react";
+
+const codeBlockVariants = cva(
+    [
+        "group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-xl border bg-card text-sm data-[size=sm]:rounded-lg data-[size=sm]:text-xs",
+        // the scrollable <pre> is focusable: ring the whole block, like a composite control (§6)
+        "has-[>[data-slot=code-block-content]:focus-visible]:border-ring has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50",
+    ],
+    {
+        variants: {
+            variant: {
+                default: "border-border text-foreground",
+                danger: "border-danger/40 text-danger",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+function CodeBlock({
+    className,
+    variant = "default",
+    size = "default",
+    ...props
+}: React.ComponentProps<"div"> & {
+    /** `destructive` is the shadcn alias of `danger`. */
+    variant?: "default" | "danger" | "destructive" | null;
+    size?: "default" | "sm";
+}) {
+    const resolved = variant === "destructive" ? "danger" : variant;
+    return (
+        <div
+            data-slot="code-block"
+            data-variant={resolved}
+            data-size={size}
+            className={cn(codeBlockVariants({variant: resolved}), className)}
+            {...props}
+        />
+    );
+}
+
+function CodeBlockHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="code-block-header"
+            className={cn(
+                "flex h-9 min-w-0 shrink-0 items-center gap-2 border-b border-border bg-muted/50 px-3 text-muted-foreground group-data-[size=sm]/code-block:h-8 group-data-[size=sm]/code-block:px-2.5 group-data-[variant=danger]/code-block:border-danger/40 group-data-[variant=danger]/code-block:text-danger *:has-[>[data-slot=code-block-title]]:min-w-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CodeBlockTitle({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="code-block-title"
+            className={cn(
+                "min-w-0 truncate font-mono text-xs font-medium text-foreground group-data-[variant=danger]/code-block:text-danger [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CodeBlockActions({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="code-block-actions"
+            className={cn(
+                "ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:border-border [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:hover:bg-[color-mix(in_oklch,var(--background),var(--foreground)_8%)]",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CodeBlockCopyButton({
+    value,
+    variant = "ghost",
+    size = "icon-xs",
+    className,
+    onClick,
+    ...props
+}: React.ComponentProps<typeof Button> & {value: string}) {
+    const [copied, setCopied] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!copied) {
+            return;
+        }
+
+        const timeout = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timeout);
+    }, [copied]);
+
+    return (
+        <>
+            <Button
+                data-slot="code-block-copy-button"
+                data-copied={copied || undefined}
+                variant={variant}
+                size={size}
+                aria-label={copied ? "Copied" : "Copy"}
+                className={cn(className)}
+                onClick={(event) => {
+                    onClick?.(event);
+                    navigator.clipboard
+                        .writeText(value)
+                        .then(() => setCopied(true))
+                        .catch(() => {});
+                }}
+                {...props}
+            >
+                {copied ? <CheckIcon /> : <CopyIcon />}
+            </Button>
+            <span aria-live="polite" className="sr-only">
+                {copied ? "Copied" : ""}
+            </span>
+        </>
+    );
+}
+
+function CodeBlockContent({
+    className,
+    children,
+    style,
+    wrap = false,
+    lineNumbers = false,
+    startLine = 1,
+    ...props
+}: React.ComponentProps<"pre"> & {
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+}) {
+    return (
+        <pre
+            data-slot="code-block-content"
+            data-wrap={wrap || undefined}
+            data-numbered={lineNumbers || undefined}
+            dir="ltr"
+            tabIndex={0}
+            style={{counterReset: `line ${startLine - 1}`, ...style}}
+            className={cn(
+                "min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap",
+                className,
+            )}
+            {...props}
+        >
+            <code
+                data-slot="code-block-code"
+                className="grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0"
+            >
+                {lineNumbers && typeof children === "string"
+                    ? children
+                          .replace(/\n$/, "")
+                          .split("\n")
+                          .map((line, index) => <CodeBlockLine key={index}>{line}</CodeBlockLine>)
+                    : children}
+            </code>
+        </pre>
+    );
+}
+
+const codeBlockLineVariants = cva(
+    "relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+    {
+        variants: {
+            variant: {
+                default: "",
+                added: "bg-success/10 after:text-success after:content-['+']",
+                removed: "bg-danger/10 after:text-danger after:content-['−']",
+                // highlighted = tint + a 2px accent indicator, never shade alone (§6)
+                highlighted: "bg-primary/10 shadow-[inset_2px_0_0_var(--primary-text)]",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    },
+);
+
+function CodeBlockLine({
+    className,
+    variant = "default",
+    children,
+    ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>) {
+    // An empty line holds a newline so copying a selection keeps blank lines.
+    const empty =
+        children === undefined ||
+        children === null ||
+        children === "" ||
+        (Array.isArray(children) && children.length === 0);
+
+    return (
+        <span
+            data-slot="code-block-line"
+            data-variant={variant}
+            className={cn(codeBlockLineVariants({variant}), className)}
+            {...props}
+        >
+            <span data-slot="code-block-line-content" className="min-w-0">
+                {empty ? "\n" : children}
+            </span>
+        </span>
+    );
+}
+
+function CodeBlockFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="code-block-footer"
+            className={cn(
+                "flex min-h-9 min-w-0 shrink-0 items-center gap-2 border-t border-border bg-muted/50 px-3 py-1.5 text-xs text-muted-foreground group-data-[size=sm]/code-block:min-h-8 group-data-[size=sm]/code-block:px-2.5",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    CodeBlock,
+    CodeBlockActions,
+    CodeBlockContent,
+    CodeBlockCopyButton,
+    CodeBlockFooter,
+    CodeBlockHeader,
+    CodeBlockLine,
+    codeBlockLineVariants,
+    CodeBlockTitle,
+    codeBlockVariants,
+};

package/src/components/collapsible.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {Collapsible as CollapsiblePrimitive} from "@base-ui/react/collapsible";
+import {cn} from "cn";
+import {ChevronRightIcon} from "lucide-react";
+import type * as React from "react";
+
+/** Root. Adds `group/collapsible` so any descendant can react to `data-open` (e.g. a rotating chevron). */
+function Collapsible({className, ...props}: CollapsiblePrimitive.Root.Props) {
+    return (
+        <CollapsiblePrimitive.Root data-slot="collapsible" className={cn("group/collapsible", className)} {...props} />
+    );
+}
+
+function CollapsibleTrigger({...props}: CollapsiblePrimitive.Trigger.Props) {
+    return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;
+}
+
+/** Chevron pushed to the trigger's end that rotates 90° while open. */
+function CollapsibleChevron({className, ...props}: React.ComponentProps<typeof ChevronRightIcon>) {
+    return (
+        <ChevronRightIcon
+            data-slot="collapsible-chevron"
+            aria-hidden="true"
+            className={cn(
+                "ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-150 group-data-open/collapsible:rotate-90 motion-reduce:transition-none",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CollapsibleContent({className, ...props}: CollapsiblePrimitive.Panel.Props) {
+    return (
+        <CollapsiblePrimitive.Panel
+            data-slot="collapsible-content"
+            className={cn(
+                "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-150 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger};

package/src/components/combobox.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import {Combobox as ComboboxPrimitive} from "@base-ui/react";
+import {Button} from "@repraze/kernelkit/components/button";
+import {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupInput,
+} from "@repraze/kernelkit/components/input-group";
+import {
+    fieldSurface,
+    invalidRing,
+    listItem,
+    listLabel,
+    listSeparator,
+    popupMotion,
+    popupSurface,
+} from "@repraze/kernelkit/lib/recipes";
+import {usePortalContainer} from "@repraze/kernelkit/provider";
+import {cn} from "cn";
+import {CheckIcon, ChevronDownIcon, XIcon} from "lucide-react";
+import * as React from "react";
+
+const Combobox = ComboboxPrimitive.Root;
+
+function ComboboxValue({...props}: ComboboxPrimitive.Value.Props) {
+    return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({className, children, ...props}: ComboboxPrimitive.Trigger.Props) {
+    return (
+        <ComboboxPrimitive.Trigger
+            data-slot="combobox-trigger"
+            className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+            {...props}
+        >
+            {children}
+            <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        </ComboboxPrimitive.Trigger>
+    );
+}
+
+function ComboboxClear({className, ...props}: ComboboxPrimitive.Clear.Props) {
+    return (
+        <ComboboxPrimitive.Clear
+            data-slot="combobox-clear"
+            render={<InputGroupButton variant="ghost" size="icon-xs" />}
+            className={cn(className)}
+            {...props}
+        >
+            <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.Clear>
+    );
+}
+
+function ComboboxInput({
+    className,
+    children,
+    disabled = false,
+    showTrigger = true,
+    showClear = false,
+    ...props
+}: ComboboxPrimitive.Input.Props & {
+    showTrigger?: boolean;
+    showClear?: boolean;
+}) {
+    return (
+        <InputGroup className={cn("w-auto", className)}>
+            <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+            <InputGroupAddon align="inline-end">
+                {showTrigger && (
+                    <InputGroupButton
+                        size="icon-xs"
+                        variant="ghost"
+                        render={<ComboboxTrigger />}
+                        nativeButton
+                        data-slot="input-group-button"
+                        className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+                        disabled={disabled}
+                    />
+                )}
+                {showClear && <ComboboxClear disabled={disabled} />}
+            </InputGroupAddon>
+            {children}
+        </InputGroup>
+    );
+}
+
+function ComboboxContent({
+    className,
+    side = "bottom",
+    sideOffset = 6,
+    align = "start",
+    alignOffset = 0,
+    anchor,
+    ...props
+}: ComboboxPrimitive.Popup.Props &
+    Pick<ComboboxPrimitive.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "anchor">) {
+    return (
+        <ComboboxPrimitive.Portal container={usePortalContainer()}>
+            <ComboboxPrimitive.Positioner
+                side={side}
+                sideOffset={sideOffset}
+                align={align}
+                alignOffset={alignOffset}
+                anchor={anchor}
+                className="isolate z-50"
+            >
+                <ComboboxPrimitive.Popup
+                    data-slot="combobox-content"
+                    data-chips={!!anchor}
+                    className={cn(
+                        popupSurface,
+                        popupMotion,
+                        "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden data-[chips=true]:min-w-(--anchor-width)",
+                        // search field inside the popup
+                        "*:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none",
+                        className,
+                    )}
+                    {...props}
+                />
+            </ComboboxPrimitive.Positioner>
+        </ComboboxPrimitive.Portal>
+    );
+}
+
+function ComboboxList({className, ...props}: ComboboxPrimitive.List.Props) {
+    return (
+        <ComboboxPrimitive.List
+            data-slot="combobox-list"
+            className={cn(
+                "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ComboboxItem({className, children, ...props}: ComboboxPrimitive.Item.Props) {
+    return (
+        <ComboboxPrimitive.Item
+            data-slot="combobox-item"
+            className={cn(
+                listItem,
+                "w-full pr-8 data-[variant=danger]:text-danger data-[variant=danger]:data-highlighted:bg-danger/10 data-[variant=danger]:data-highlighted:text-danger",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ComboboxPrimitive.ItemIndicator
+                render={
+                    <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+                }
+            >
+                <CheckIcon className="pointer-events-none" />
+            </ComboboxPrimitive.ItemIndicator>
+        </ComboboxPrimitive.Item>
+    );
+}
+
+function ComboboxGroup({className, ...props}: ComboboxPrimitive.Group.Props) {
+    return <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />;
+}
+
+function ComboboxLabel({className, ...props}: ComboboxPrimitive.GroupLabel.Props) {
+    return <ComboboxPrimitive.GroupLabel data-slot="combobox-label" className={cn(listLabel, className)} {...props} />;
+}
+
+function ComboboxCollection({...props}: ComboboxPrimitive.Collection.Props) {
+    return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+function ComboboxEmpty({className, ...props}: ComboboxPrimitive.Empty.Props) {
+    return (
+        <ComboboxPrimitive.Empty
+            data-slot="combobox-empty"
+            className={cn(
+                "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ComboboxSeparator({className, ...props}: ComboboxPrimitive.Separator.Props) {
+    return (
+        <ComboboxPrimitive.Separator
+            data-slot="combobox-separator"
+            className={cn(listSeparator, className)}
+            {...props}
+        />
+    );
+}
+
+function ComboboxChips({
+    className,
+    ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
+    return (
+        <ComboboxPrimitive.Chips
+            data-slot="combobox-chips"
+            className={cn(
+                fieldSurface,
+                invalidRing,
+                "flex min-h-8 flex-wrap items-center gap-1 bg-clip-padding px-2.5 py-1 text-sm has-data-[slot=combobox-chip]:px-1",
+                "has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-ring/50",
+                "has-aria-invalid:border-danger has-aria-invalid:ring-3 has-aria-invalid:ring-danger/20 dark:has-aria-invalid:ring-danger/40",
+                "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-field-disabled has-[input:disabled]:opacity-50",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function ComboboxChip({
+    className,
+    children,
+    showRemove = true,
+    ...props
+}: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+}) {
+    return (
+        <ComboboxPrimitive.Chip
+            data-slot="combobox-chip"
+            className={cn(
+                "flex h-5.5 w-fit items-center justify-center gap-1 rounded-md border border-border bg-secondary px-1.5 text-xs font-medium whitespace-nowrap text-secondary-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            {showRemove && <ComboboxChipRemove />}
+        </ComboboxPrimitive.Chip>
+    );
+}
+
+function ComboboxChipRemove({className, children, ...props}: ComboboxPrimitive.ChipRemove.Props) {
+    return (
+        <ComboboxPrimitive.ChipRemove
+            data-slot="combobox-chip-remove"
+            render={<Button variant="ghost" size="icon-xs" />}
+            aria-label="Remove"
+            className={cn(
+                "-ml-1 size-5 rounded-sm text-muted-foreground hover:text-foreground [&_svg:not([class*='size-'])]:size-3",
+                className,
+            )}
+            {...props}
+        >
+            {children ?? <XIcon className="pointer-events-none" />}
+        </ComboboxPrimitive.ChipRemove>
+    );
+}
+
+function ComboboxChipsInput({className, ...props}: ComboboxPrimitive.Input.Props) {
+    return (
+        <ComboboxPrimitive.Input
+            data-slot="combobox-chip-input"
+            className={cn(
+                "min-w-16 flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-sm",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function useComboboxAnchor() {
+    return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+    Combobox,
+    ComboboxChip,
+    ComboboxChipRemove,
+    ComboboxChips,
+    ComboboxChipsInput,
+    ComboboxCollection,
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxLabel,
+    ComboboxList,
+    ComboboxSeparator,
+    ComboboxTrigger,
+    ComboboxValue,
+    useComboboxAnchor,
+};