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

package/src/components/calendar.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import {Button, buttonVariants} from "@repraze/kernelkit/components/button";
+import {cn} from "cn";
+import {ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from "lucide-react";
+import * as React from "react";
+import {type DayButton, DayPicker, getDefaultClassNames, type Locale} from "react-day-picker";
+
+/*
+ * States must read in high contrast, where surface shades vanish (GUIDELINES.md §6):
+ * - selected / range ends: primary fill
+ * - range middle: translucent primary band (bg-primary/15), not a muted shade
+ * - today: primary dot under the number + medium weight
+ * - outside days: muted text; disabled: muted text + line-through
+ */
+function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    captionLayout = "label",
+    buttonVariant = "ghost",
+    locale,
+    formatters,
+    components,
+    ...props
+}: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+    const defaultClassNames = getDefaultClassNames();
+
+    return (
+        <DayPicker
+            showOutsideDays={showOutsideDays}
+            className={cn(
+                "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+                className,
+            )}
+            captionLayout={captionLayout}
+            locale={locale}
+            formatters={{
+                formatMonthDropdown: (date) => date.toLocaleString(locale?.code, {month: "short"}),
+                ...formatters,
+            }}
+            classNames={{
+                root: cn("w-fit", defaultClassNames.root),
+                months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+                month: cn("flex w-full flex-col gap-2", defaultClassNames.month),
+                nav: cn(
+                    "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+                    defaultClassNames.nav,
+                ),
+                button_previous: cn(
+                    buttonVariants({variant: buttonVariant, size: "icon"}),
+                    "size-(--cell-size) rounded-(--cell-radius) p-0 select-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+                    defaultClassNames.button_previous,
+                ),
+                button_next: cn(
+                    buttonVariants({variant: buttonVariant, size: "icon"}),
+                    "size-(--cell-size) rounded-(--cell-radius) p-0 select-none aria-disabled:pointer-events-none aria-disabled:opacity-50",
+                    defaultClassNames.button_next,
+                ),
+                month_caption: cn(
+                    "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+                    defaultClassNames.month_caption,
+                ),
+                dropdowns: cn(
+                    "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+                    defaultClassNames.dropdowns,
+                ),
+                dropdown_root: cn(
+                    "relative rounded-(--cell-radius) border border-input transition-[border-color,box-shadow] hover:bg-hover has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50",
+                    defaultClassNames.dropdown_root,
+                ),
+                dropdown: cn("absolute inset-0 cursor-pointer bg-popover opacity-0", defaultClassNames.dropdown),
+                caption_label: cn(
+                    "font-heading font-medium tracking-tight select-none",
+                    captionLayout === "label"
+                        ? "text-sm"
+                        : "flex h-7 items-center gap-1 rounded-(--cell-radius) pr-1.5 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+                    defaultClassNames.caption_label,
+                ),
+                month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+                weekdays: cn("flex", defaultClassNames.weekdays),
+                weekday: cn(
+                    "flex-1 rounded-(--cell-radius) py-1 text-xs font-normal text-muted-foreground select-none",
+                    defaultClassNames.weekday,
+                ),
+                week: cn("mt-1 flex w-full", defaultClassNames.week),
+                week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+                week_number: cn("text-xs text-muted-foreground select-none", defaultClassNames.week_number),
+                day: cn(
+                    "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
+                    props.showWeekNumber
+                        ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+                        : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
+                    defaultClassNames.day,
+                ),
+                // the band behind a range: ends get a half-cell strip so the band runs under the rounded fill
+                range_start: cn(
+                    "relative isolate z-0 rounded-l-(--cell-radius) rounded-r-none bg-primary/15 dark:bg-primary/20",
+                    defaultClassNames.range_start,
+                ),
+                range_middle: cn("rounded-none bg-primary/15 dark:bg-primary/20", defaultClassNames.range_middle),
+                range_end: cn(
+                    "relative isolate z-0 rounded-l-none rounded-r-(--cell-radius) bg-primary/15 dark:bg-primary/20",
+                    defaultClassNames.range_end,
+                ),
+                today: cn("rounded-(--cell-radius) data-[selected=true]:rounded-none", defaultClassNames.today),
+                outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+                disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+                hidden: cn("invisible", defaultClassNames.hidden),
+                ...classNames,
+            }}
+            components={{
+                Root: ({className, rootRef, ...props}) => {
+                    return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+                },
+                Chevron: ({className, orientation, ...props}) => {
+                    if (orientation === "left") {
+                        return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+                    }
+
+                    if (orientation === "right") {
+                        return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+                    }
+
+                    return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+                },
+                DayButton: ({...props}) => <CalendarDayButton locale={locale} {...props} />,
+                WeekNumber: ({children, ...props}) => {
+                    return (
+                        <td {...props}>
+                            <div className="flex size-(--cell-size) items-center justify-center text-center">
+                                {children}
+                            </div>
+                        </td>
+                    );
+                },
+                ...components,
+            }}
+            {...props}
+        />
+    );
+}
+
+function CalendarDayButton({
+    className,
+    day,
+    modifiers,
+    locale,
+    // react-day-picker passes DOM props; `color` would collide with Button's color axis
+    color: _color,
+    ...props
+}: React.ComponentProps<typeof DayButton> & {locale?: Partial<Locale>}) {
+    const defaultClassNames = getDefaultClassNames();
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    React.useEffect(() => {
+        if (modifiers.focused) {
+            ref.current?.focus();
+        }
+    }, [modifiers.focused]);
+
+    return (
+        <Button
+            ref={ref}
+            variant="ghost"
+            size="icon"
+            data-slot="calendar-day"
+            data-day={day.date.toLocaleDateString(locale?.code)}
+            data-today={modifiers.today || undefined}
+            data-outside={modifiers.outside || undefined}
+            data-disabled={modifiers.disabled || undefined}
+            data-selected-single={
+                modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+            }
+            data-range-start={modifiers.range_start}
+            data-range-end={modifiers.range_end}
+            data-range-middle={modifiers.range_middle}
+            className={cn(
+                "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 rounded-(--cell-radius) border-0 leading-none font-normal tabular-nums active:translate-y-0",
+                "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50",
+                // today: a dot, readable on every surface and in hc
+                "data-today:font-medium data-today:after:absolute data-today:after:bottom-1 data-today:after:left-1/2 data-today:after:size-1 data-today:after:-translate-x-1/2 data-today:after:rounded-pill data-today:after:bg-primary-text",
+                "data-outside:text-muted-foreground data-outside:hover:text-foreground",
+                "data-disabled:line-through",
+                "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-foreground data-[range-middle=true]:hover:bg-primary/15",
+                "data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-start=true]:hover:bg-primary/85",
+                "data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-end=true]:hover:bg-primary/85",
+                "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-primary/85",
+                // only today has the dot: an `after:` utility elsewhere would add a flex item and shift the number
+                "data-today:data-[range-end=true]:after:bg-primary-foreground data-today:data-[range-start=true]:after:bg-primary-foreground data-today:data-[selected-single=true]:after:bg-primary-foreground",
+                "[&>span]:text-xs [&>span]:opacity-70",
+                defaultClassNames.day,
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {Calendar, CalendarDayButton};

package/src/components/callout.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "@repraze/kernelkit/components/collapsible";
+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";
+import {ChevronDownIcon} from "lucide-react";
+import type * as React from "react";
+
+/**
+ * Long-form aside for docs and articles (note, tip, warning). A left accent bar carries the color;
+ * the surface is a faint wash so body text stays foreground. For app status use Alert.
+ */
+const calloutVariants = cva(
+    [
+        "group/callout relative overflow-hidden rounded-lg border border-(--c)/25 bg-(--c)/5 pl-1 text-sm text-foreground hc:border-(--c)",
+        "before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-(--c)",
+    ],
+    {
+        variants: {
+            color: colorVariants,
+        },
+        compoundVariants: [
+            {
+                color: "neutral",
+                class: "border-border bg-card before:bg-muted-foreground hc:border-border",
+            },
+        ],
+        defaultVariants: {color: "neutral"},
+    },
+);
+
+const calloutHeader =
+    "flex min-h-8 w-full items-center gap-1.5 px-3 py-1.5 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+
+const calloutBody =
+    "px-3 py-2 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--c)/25 group-data-[color=neutral]/callout:border-border hc:border-(--c)";
+
+interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
+    /** Status or hue of the bar, header and border. */
+    color?: Color | null;
+    /** Leading icon element, e.g. `<InfoIcon />`. */
+    icon?: React.ReactNode;
+    /** Header label. The header renders when `title` or `icon` is set. */
+    title?: React.ReactNode;
+    /** Header toggles the body. Needs a `title` or `icon`. */
+    collapsible?: boolean;
+    /** Start collapsed (only with `collapsible`). */
+    defaultCollapsed?: boolean;
+}
+
+function Callout({
+    className,
+    color,
+    icon,
+    title,
+    collapsible = false,
+    defaultCollapsed = false,
+    children,
+    ...props
+}: CalloutProps) {
+    const resolved = color ?? "neutral";
+    const hasHeader = Boolean(title || icon);
+    const headerContent = (
+        <>
+            {icon}
+            {title ? (
+                <span data-slot="callout-title" className={cn(heading, "font-medium")}>
+                    {title}
+                </span>
+            ) : null}
+        </>
+    );
+
+    if (collapsible && hasHeader) {
+        return (
+            <Collapsible
+                data-slot="callout"
+                data-color={resolved}
+                defaultOpen={!defaultCollapsed}
+                className={cn(calloutVariants({color: resolved}), className)}
+                {...props}
+            >
+                <CollapsibleTrigger
+                    data-slot="callout-header"
+                    className={cn(
+                        calloutHeader,
+                        "cursor-pointer transition-[background-color,box-shadow] outline-none select-none hover:bg-hover focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
+                    )}
+                >
+                    {headerContent}
+                    <ChevronDownIcon
+                        data-slot="callout-chevron"
+                        className="ml-auto transition-transform duration-150 group-data-closed/callout:-rotate-90 motion-reduce:transition-none"
+                    />
+                </CollapsibleTrigger>
+                {children ? (
+                    <CollapsibleContent className="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">
+                        <div data-slot="callout-content" className={cn(calloutBody, "border-t")}>
+                            {children}
+                        </div>
+                    </CollapsibleContent>
+                ) : null}
+            </Collapsible>
+        );
+    }
+
+    return (
+        <div
+            data-slot="callout"
+            data-color={resolved}
+            className={cn(calloutVariants({color: resolved}), className)}
+            {...props}
+        >
+            {hasHeader ? (
+                <div data-slot="callout-header" className={calloutHeader}>
+                    {headerContent}
+                </div>
+            ) : null}
+            {children ? (
+                <div data-slot="callout-content" className={cn(calloutBody, hasHeader && "border-t")}>
+                    {children}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+export {Callout, calloutVariants};
+export type {CalloutProps};

package/src/components/card.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
+import {heading} from "@repraze/kernelkit/lib/recipes";
+import {cva} from "class-variance-authority";
+import {cn} from "cn";
+import {ArrowRightIcon, ArrowUpRightIcon} from "lucide-react";
+import * as React from "react";
+
+/** `--card-spacing` drives every part's padding and the gap between sections (§4: p-4, sm p-3). */
+const cardVariants = cva(
+    "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border border-border bg-card py-(--card-spacing) text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+    {
+        variants: {
+            size: {
+                default: "[--card-spacing:--spacing(4)]",
+                sm: "[--card-spacing:--spacing(3)]",
+            },
+        },
+        defaultVariants: {size: "default"},
+    },
+);
+
+function Card({className, size = "default", ...props}: React.ComponentProps<"div"> & {size?: "default" | "sm"}) {
+    return <div data-slot="card" data-size={size} className={cn(cardVariants({size}), className)} {...props} />;
+}
+
+function CardHeader({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-header"
+            className={cn(
+                "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:border-border [.border-b]:pb-(--card-spacing)",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function CardTitle({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-title"
+            className={cn(heading, "text-base leading-snug group-data-[size=sm]/card:text-sm", className)}
+            {...props}
+        />
+    );
+}
+
+function CardDescription({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+function CardAction({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-action"
+            className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+            {...props}
+        />
+    );
+}
+
+function CardContent({className, ...props}: React.ComponentProps<"div">) {
+    return <div data-slot="card-content" className={cn("px-(--card-spacing)", className)} {...props} />;
+}
+
+function CardFooter({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="card-footer"
+            className={cn(
+                "flex items-center gap-2 rounded-b-xl border-t border-border bg-muted/50 p-(--card-spacing)",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+/**
+ * A whole card that is one link (§6, clickable surfaces). The cursor alone never says "clickable":
+ * hover and keyboard focus turn the border and title to the accent, wash the top in the accent tint,
+ * nudge a `LinkCardArrow` and zoom a `LinkCardMedia`. Use `render` for a router link.
+ *
+ * ```tsx
+ * <LinkCard render={<Link to="/ports/vscode" />}>
+ *   <CardHeader>
+ *     <CardTitle>VS Code</CardTitle>
+ *     <CardDescription>Editor theme.</CardDescription>
+ *     <CardAction><LinkCardArrow /></CardAction>
+ *   </CardHeader>
+ * </LinkCard>
+ * ```
+ */
+function LinkCard({
+    className,
+    size = "default",
+    render,
+    ...props
+}: useRender.ComponentProps<"a"> & {size?: "default" | "sm"}) {
+    return useRender({
+        defaultTagName: "a",
+        props: mergeProps<"a">(
+            {
+                className: cn(
+                    cardVariants({size}),
+                    "group/link-card relative isolate outline-none transition-[border-color,box-shadow] duration-200 motion-reduce:transition-none",
+                    "hover:border-primary-text focus-visible:border-primary-text focus-visible:ring-3 focus-visible:ring-ring/50",
+                    // the wash: under the content, over the card background
+                    "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-linear-to-b before:from-primary-tint before:to-transparent before:to-70% before:opacity-0 before:transition-opacity before:duration-200 hover:before:opacity-100 focus-visible:before:opacity-100 motion-reduce:before:transition-none",
+                    "has-[>[data-slot=link-card-media]:first-child]:pt-0",
+                    "**:data-[slot=card-title]:transition-colors hover:**:data-[slot=card-title]:text-primary-text focus-visible:**:data-[slot=card-title]:text-primary-text",
+                    className,
+                ),
+            },
+            props,
+        ),
+        render,
+        state: {slot: "link-card", size},
+    });
+}
+
+/** An image band at the top of a LinkCard; its child zooms slightly on hover. */
+function LinkCardMedia({className, ...props}: React.ComponentProps<"div">) {
+    return (
+        <div
+            data-slot="link-card-media"
+            className={cn(
+                "overflow-hidden border-b border-border *:transition-transform *:duration-300 group-hover/link-card:*:scale-[1.03] group-focus-visible/link-card:*:scale-[1.03] motion-reduce:*:transition-none motion-reduce:group-hover/link-card:*:scale-100",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+/** The trailing arrow of a LinkCard: accent on hover, and it moves toward where the click goes. */
+function LinkCardArrow({
+    className,
+    external = false,
+    ...props
+}: React.ComponentProps<typeof ArrowRightIcon> & {
+    /** An up-right arrow for links that leave the site. */
+    external?: boolean;
+}) {
+    const Icon = external ? ArrowUpRightIcon : ArrowRightIcon;
+    return (
+        <Icon
+            data-slot="link-card-arrow"
+            aria-hidden
+            className={cn(
+                "size-4 shrink-0 text-muted-foreground transition-[translate,color] duration-200 group-hover/link-card:text-primary-text group-focus-visible/link-card:text-primary-text motion-reduce:transition-none",
+                external
+                    ? "group-hover/link-card:translate-x-0.5 group-hover/link-card:-translate-y-0.5 group-focus-visible/link-card:translate-x-0.5 group-focus-visible/link-card:-translate-y-0.5"
+                    : "group-hover/link-card:translate-x-1 group-focus-visible/link-card:translate-x-1",
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Card,
+    CardAction,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+    cardVariants,
+    LinkCard,
+    LinkCardArrow,
+    LinkCardMedia,
+};