nextjs-starter-kit 0.1.1

package/src/components/ui/chart.jsx

@@ -0,0 +1,332 @@
+"use client";
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = {
+    light: "",
+    dark: ".dark",
+};
+
+const ChartContext = React.createContext(null);
+
+function useChart() {
+    const context = React.useContext(ChartContext);
+
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+
+    return context;
+}
+
+function ChartContainer({ id, className, children, config, ...props }) {
+    const uniqueId = React.useId();
+    const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+    return (
+        <ChartContext.Provider value={{ config }}>
+            <div
+                data-slot="chart"
+                data-chart={chartId}
+                className={cn(
+                    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+                    className
+                )}
+                {...props}
+            >
+                <ChartStyle id={chartId} config={config} />
+                <RechartsPrimitive.ResponsiveContainer>
+                    {children}
+                </RechartsPrimitive.ResponsiveContainer>
+            </div>
+        </ChartContext.Provider>
+    );
+}
+
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(
+        ([, config]) => config.theme || config.color
+    );
+
+    if (!colorConfig.length) {
+        return null;
+    }
+
+    return (
+        <style
+            dangerouslySetInnerHTML={{
+                __html: Object.entries(THEMES)
+                    .map(
+                        ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+    .map(([key, itemConfig]) => {
+        const color = itemConfig.theme?.[theme] || itemConfig.color;
+        return color ? `  --color-${key}: ${color};` : null;
+    })
+    .join("\n")}
+}
+`
+                    )
+                    .join("\n"),
+            }}
+        />
+    );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+    active,
+    payload,
+    className,
+    indicator = "dot",
+    hideLabel = false,
+    hideIndicator = false,
+    label,
+    labelFormatter,
+    labelClassName,
+    formatter,
+    color,
+    nameKey,
+    labelKey,
+}) {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+
+        const [item] = payload;
+        const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value =
+            !labelKey && typeof label === "string"
+                ? config[label]?.label || label
+                : itemConfig?.label;
+
+        if (labelFormatter) {
+            return (
+                <div className={cn("font-medium", labelClassName)}>
+                    {labelFormatter(value, payload)}
+                </div>
+            );
+        }
+
+        if (!value) {
+            return null;
+        }
+
+        return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+        return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+        <div
+            className={cn(
+                "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+                className
+            )}
+        >
+            {!nestLabel ? tooltipLabel : null}
+            <div className="grid gap-1.5">
+                {payload.map((item, index) => {
+                    const key = `${nameKey || item.name || item.dataKey || "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(
+                        config,
+                        item,
+                        key
+                    );
+                    const indicatorColor =
+                        color || item.payload.fill || item.color;
+
+                    return (
+                        <div
+                            key={item.dataKey}
+                            className={cn(
+                                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                                indicator === "dot" && "items-center"
+                            )}
+                        >
+                            {formatter &&
+                            item?.value !== undefined &&
+                            item.name ? (
+                                formatter(
+                                    item.value,
+                                    item.name,
+                                    item,
+                                    index,
+                                    item.payload
+                                )
+                            ) : (
+                                <>
+                                    {itemConfig?.icon ? (
+                                        <itemConfig.icon />
+                                    ) : (
+                                        !hideIndicator && (
+                                            <div
+                                                className={cn(
+                                                    "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                                                    {
+                                                        "h-2.5 w-2.5":
+                                                            indicator === "dot",
+                                                        "w-1":
+                                                            indicator ===
+                                                            "line",
+                                                        "w-0 border-[1.5px] border-dashed bg-transparent":
+                                                            indicator ===
+                                                            "dashed",
+                                                        "my-0.5":
+                                                            nestLabel &&
+                                                            indicator ===
+                                                                "dashed",
+                                                    }
+                                                )}
+                                                style={{
+                                                    "--color-bg":
+                                                        indicatorColor,
+                                                    "--color-border":
+                                                        indicatorColor,
+                                                }}
+                                            />
+                                        )
+                                    )}
+                                    <div
+                                        className={cn(
+                                            "flex flex-1 justify-between leading-none",
+                                            nestLabel
+                                                ? "items-end"
+                                                : "items-center"
+                                        )}
+                                    >
+                                        <div className="grid gap-1.5">
+                                            {nestLabel ? tooltipLabel : null}
+                                            <span className="text-muted-foreground">
+                                                {itemConfig?.label || item.name}
+                                            </span>
+                                        </div>
+                                        {item.value && (
+                                            <span className="text-foreground font-mono font-medium tabular-nums">
+                                                {item.value.toLocaleString()}
+                                            </span>
+                                        )}
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+    className,
+    hideIcon = false,
+    payload,
+    verticalAlign = "bottom",
+    nameKey,
+}) {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+        return null;
+    }
+
+    return (
+        <div
+            className={cn(
+                "flex items-center justify-center gap-4",
+                verticalAlign === "top" ? "pb-3" : "pt-3",
+                className
+            )}
+        >
+            {payload.map((item) => {
+                const key = `${nameKey || item.dataKey || "value"}`;
+                const itemConfig = getPayloadConfigFromPayload(
+                    config,
+                    item,
+                    key
+                );
+
+                return (
+                    <div
+                        key={item.value}
+                        className={cn(
+                            "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                        )}
+                    >
+                        {itemConfig?.icon && !hideIcon ? (
+                            <itemConfig.icon />
+                        ) : (
+                            <div
+                                className="h-2 w-2 shrink-0 rounded-[2px]"
+                                style={{
+                                    backgroundColor: item.color,
+                                }}
+                            />
+                        )}
+                        {itemConfig?.label}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+
+    const payloadPayload =
+        "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+            ? payload.payload
+            : undefined;
+
+    let configLabelKey = key;
+
+    if (key in payload && typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    } else if (
+        payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string"
+    ) {
+        configLabelKey = payloadPayload[key];
+    }
+
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    ChartLegend,
+    ChartLegendContent,
+    ChartStyle,
+};

package/src/components/ui/checkbox.jsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({ className, ...props }) {
+    return (
+        <CheckboxPrimitive.Root
+            data-slot="checkbox"
+            className={cn(
+                "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+                className
+            )}
+            {...props}
+        >
+            <CheckboxPrimitive.Indicator
+                data-slot="checkbox-indicator"
+                className="flex items-center justify-center text-current transition-none"
+            >
+                <CheckIcon className="size-3.5" />
+            </CheckboxPrimitive.Indicator>
+        </CheckboxPrimitive.Root>
+    );
+}
+
+export { Checkbox };

package/src/components/ui/collapsible.jsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({ ...props }) {
+    return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({ ...props }) {
+    return (
+        <CollapsiblePrimitive.CollapsibleTrigger
+            data-slot="collapsible-trigger"
+            {...props}
+        />
+    );
+}
+
+function CollapsibleContent({ ...props }) {
+    return (
+        <CollapsiblePrimitive.CollapsibleContent
+            data-slot="collapsible-content"
+            {...props}
+        />
+    );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/ui/command.jsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+
+function Command({ className, ...props }) {
+    return (
+        <CommandPrimitive
+            data-slot="command"
+            className={cn(
+                "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandDialog({
+    title = "Command Palette",
+    description = "Search for a command to run...",
+    children,
+    className,
+    showCloseButton = true,
+    ...props
+}) {
+    return (
+        <Dialog {...props}>
+            <DialogHeader className="sr-only">
+                <DialogTitle>{title}</DialogTitle>
+                <DialogDescription>{description}</DialogDescription>
+            </DialogHeader>
+            <DialogContent
+                className={cn("overflow-hidden p-0", className)}
+                showCloseButton={showCloseButton}
+            >
+                <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                    {children}
+                </Command>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+function CommandInput({ className, ...props }) {
+    return (
+        <div
+            data-slot="command-input-wrapper"
+            className="flex h-9 items-center gap-2 border-b px-3"
+        >
+            <SearchIcon className="size-4 shrink-0 opacity-50" />
+            <CommandPrimitive.Input
+                data-slot="command-input"
+                className={cn(
+                    "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+                    className
+                )}
+                {...props}
+            />
+        </div>
+    );
+}
+
+function CommandList({ className, ...props }) {
+    return (
+        <CommandPrimitive.List
+            data-slot="command-list"
+            className={cn(
+                "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandEmpty({ ...props }) {
+    return (
+        <CommandPrimitive.Empty
+            data-slot="command-empty"
+            className="py-6 text-center text-sm"
+            {...props}
+        />
+    );
+}
+
+function CommandGroup({ className, ...props }) {
+    return (
+        <CommandPrimitive.Group
+            data-slot="command-group"
+            className={cn(
+                "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandSeparator({ className, ...props }) {
+    return (
+        <CommandPrimitive.Separator
+            data-slot="command-separator"
+            className={cn("bg-border -mx-1 h-px", className)}
+            {...props}
+        />
+    );
+}
+
+function CommandItem({ className, ...props }) {
+    return (
+        <CommandPrimitive.Item
+            data-slot="command-item"
+            className={cn(
+                "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function CommandShortcut({ className, ...props }) {
+    return (
+        <span
+            data-slot="command-shortcut"
+            className={cn(
+                "text-muted-foreground ml-auto text-xs tracking-widest",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export {
+    Command,
+    CommandDialog,
+    CommandInput,
+    CommandList,
+    CommandEmpty,
+    CommandGroup,
+    CommandItem,
+    CommandShortcut,
+    CommandSeparator,
+};

package/src/components/ui/container.jsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+function Container({ children, className, ref }) {
+    return (
+        <section
+            className={cn(
+                className,
+                "3xl:w-2/3 relative z-10 mx-auto w-11/12 2xl:w-3/4"
+            )}
+            ref={ref}
+        >
+            {children}
+        </section>
+    );
+}
+
+export default Container;

package/src/components/ui/dialog.jsx

@@ -0,0 +1,127 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Dialog({ ...props }) {
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }) {
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }) {
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }) {
+    return (
+        <DialogPrimitive.Overlay
+            data-slot="dialog-overlay"
+            className={cn(
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function DialogContent({
+    className,
+    children,
+    showCloseButton = true,
+    ...props
+}) {
+    return (
+        <DialogPortal data-slot="dialog-portal">
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                data-slot="dialog-content"
+                className={cn(
+                    "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <DialogPrimitive.Close
+                        data-slot="dialog-close"
+                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                    >
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    );
+}
+
+function DialogHeader({ className, ...props }) {
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn(
+                "flex flex-col gap-2 text-center sm:text-left",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function DialogFooter({ className, ...props }) {
+    return (
+        <div
+            data-slot="dialog-footer"
+            className={cn(
+                "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function DialogTitle({ className, ...props }) {
+    return (
+        <DialogPrimitive.Title
+            data-slot="dialog-title"
+            className={cn("text-lg leading-none font-semibold", className)}
+            {...props}
+        />
+    );
+}
+
+function DialogDescription({ className, ...props }) {
+    return (
+        <DialogPrimitive.Description
+            data-slot="dialog-description"
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    );
+}
+
+export {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
+};