nextworks 0.0.1 → 0.1.0-alpha.1

package/dist/kits/forms/components/ui/button.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 shadow-xs",
+        outline:
+          "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    /** When true, bypasses tokenized buttonVariants so callers fully control classes */
+    unstyled?: boolean;
+    /** Opt-in: force inline CSS var styles for color/bg/border/ring */
+    forceInlineVars?: boolean;
+  };
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild = false,
+      unstyled = false,
+      forceInlineVars = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+
+    // Use caller-provided style; only inject inline var-driven colors when explicitly requested
+    const incomingStyle =
+      (props.style as React.CSSProperties | undefined) ?? undefined;
+    const finalStyle =
+      forceInlineVars && !unstyled
+        ? {
+            ...incomingStyle,
+            color: "var(--btn-fg)",
+            backgroundColor: "var(--btn-bg)",
+            borderColor: "var(--btn-border)",
+            "--tw-ring-color": "var(--btn-ring)",
+          }
+        : incomingStyle;
+
+    // Only enable CSS variable hooks when explicitly requested via inline vars
+    // or when the caller sets any [--btn-*] classes in className.
+    const wantsVarHooks =
+      !unstyled &&
+      (forceInlineVars ||
+        (typeof className === "string" && className.includes("[--btn-")));
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="button"
+        className={
+          unstyled
+            ? cn(
+                "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
+                className,
+              )
+            : cn(
+                buttonVariants({ variant, size }),
+                wantsVarHooks && [
+                  // Color var hooks (apply only when CSS vars are provided)
+                  "text-[var(--btn-fg)]",
+                  "bg-[var(--btn-bg)]",
+                  "hover:bg-[var(--btn-hover-bg)]",
+                  "hover:text-[var(--btn-hover-fg)]",
+                  // explicit dark variants to compete with dark: utilities from variants like outline
+                  "dark:bg-[var(--btn-bg)]",
+                  "dark:hover:bg-[var(--btn-hover-bg)]",
+                  "dark:hover:text-[var(--btn-hover-fg)]",
+                  // Focus ring and border hooks
+                  "focus-visible:ring-[var(--btn-ring)]",
+                  "border-[var(--btn-border)]",
+                  "dark:border-[var(--btn-border)]",
+                ],
+                className,
+              )
+        }
+        style={finalStyle}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/kits/forms/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, ...props }, ref) => {
+    // Use the native accent-color where supported for consistent checkbox fill
+    const style: React.CSSProperties = { accentColor: "var(--primary)" }; // fallback; modern browsers will use this accent color
+
+    return (
+      <input
+        type="checkbox"
+        ref={ref}
+        style={style}
+        className={cn(
+          // Keep layout small but add smooth transitions and focus ring
+          "h-4 w-4 rounded border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] transition-colors duration-200 ease-in-out",
+          "focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/kits/forms/components/ui/form/context.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { useFormContext } from "react-hook-form";
+
+export const FormFieldContext = React.createContext<{ name: string } | null>(
+  null,
+);
+
+export const FormItemContext = React.createContext<{ id: string } | null>(null);
+
+export function useFormField() {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>");
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const id = itemContext.id;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  } as const;
+}

package/dist/kits/forms/components/ui/form/form-control.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import { useFormField } from "./context";
+import { Slot } from "@radix-ui/react-slot";
+
+export interface FormControlProps
+  extends React.ComponentPropsWithoutRef<typeof Slot> {}
+
+export const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  FormControlProps
+>(({ ...props }, ref) => {
+  const { formItemId, formDescriptionId, formMessageId, error } =
+    useFormField();
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";

package/dist/kits/forms/components/ui/form/form-description.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import * as React from "react";
+import { useFormField } from "./context";
+import { cn } from "@/lib/utils";
+
+export interface FormDescriptionProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export const FormDescription = ({
+  className,
+  ...props
+}: FormDescriptionProps) => {
+  const { formDescriptionId } = useFormField();
+  return (
+    <p
+      id={formDescriptionId}
+      className={cn("text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};

package/dist/kits/forms/components/ui/form/form-field.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import * as React from "react";
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+import { FormFieldContext } from "./context";
+
+export interface FormFieldProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+> extends Omit<ControllerProps<TFieldValues, TName>, "render"> {
+  render: ControllerProps<TFieldValues, TName>["render"];
+}
+
+export function FormField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>,
+>(props: FormFieldProps<TFieldValues, TName>) {
+  const { name, control, rules, shouldUnregister, render } = props;
+
+  return (
+    <FormFieldContext.Provider value={{ name: name as string }}>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        shouldUnregister={shouldUnregister}
+        render={render}
+      />
+    </FormFieldContext.Provider>
+  );
+}

package/dist/kits/forms/components/ui/form/form-item.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { FormItemContext } from "./context";
+
+export interface FormItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";

package/dist/kits/forms/components/ui/form/form-label.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import { Label } from "@/components/ui/label";
+import { useFormField } from "./context";
+import { cn } from "@/lib/utils";
+
+export interface FormLabelProps extends React.ComponentProps<typeof Label> {}
+
+export const FormLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  FormLabelProps
+>(({ className, ...props }, ref) => {
+  const { formItemId } = useFormField();
+  return (
+    <Label
+      ref={ref}
+      htmlFor={formItemId}
+      className={cn(className)}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";

package/dist/kits/forms/components/ui/form/form-message.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import { useFormField } from "./context";
+import { cn } from "@/lib/utils";
+
+export interface FormMessageProps
+  extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+export const FormMessage = ({
+  className,
+  children,
+  ...props
+}: FormMessageProps) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message || children) : children;
+
+  if (!body) return null;
+
+  return (
+    <p
+      id={formMessageId}
+      className={cn("text-xs text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+};

package/dist/kits/forms/components/ui/form/form.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import {
+  FormProvider,
+  type UseFormReturn,
+  type FieldValues,
+} from "react-hook-form";
+
+export interface FormProps<TFieldValues extends FieldValues = FieldValues> {
+  children: React.ReactNode;
+  className?: string;
+  methods: UseFormReturn<TFieldValues>;
+}
+
+export function Form<TFieldValues extends FieldValues = FieldValues>({
+  children,
+  className,
+  methods,
+}: FormProps<TFieldValues>) {
+  return (
+    <FormProvider<TFieldValues> {...methods}>
+      <div className={className}>{children}</div>
+    </FormProvider>
+  );
+}

package/dist/kits/forms/components/ui/input.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          // Base structural + token fallbacks
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          // CSS variable hooks (preset-first). When vars are unset, these are ignored and tokens above apply.
+          "focus-visible:ring-offset-background border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring,var(--ring))] focus-visible:ring-offset-2",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/dist/kits/forms/components/ui/label.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      labelVariants(),
+      // Optional color override via var; falls back to inherited color when unset
+      "text-[var(--label-fg)]",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/dist/kits/forms/components/ui/select.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex h-10 w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          "bg-[var(--input-bg)] text-[var(--input-fg)]",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  },
+);
+Select.displayName = "Select";
+
+export { Select };

package/dist/kits/forms/components/ui/switch.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type SwitchProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  isLoading?: boolean;
+};
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, isLoading, disabled, ...props }, ref) => {
+    const checked = !!(props as any).checked;
+    const isDisabled = !!disabled || !!isLoading;
+    return (
+      <label
+        className={cn(
+          "focus-within:ring-offset-background inline-flex items-center rounded-full focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2",
+          isDisabled ? "cursor-not-allowed opacity-80" : "cursor-pointer",
+          className,
+        )}
+      >
+        <input
+          type="checkbox"
+          role="switch"
+          ref={ref}
+          className="sr-only"
+          disabled={isDisabled}
+          aria-busy={isLoading ? "true" : undefined}
+          {...(props as any)}
+        />
+        <span
+          aria-hidden
+          className={cn(
+            "relative inline-flex h-6 w-11 flex-shrink-0 rounded-full transition-colors duration-200",
+            checked ? "bg-[var(--primary)]" : "bg-[var(--primary)]/80",
+          )}
+        >
+          <span
+            className={cn(
+              // Thumb should adjust for theme to guarantee contrast
+              "absolute top-0.5 left-0.5 h-5 w-5 transform rounded-full bg-[var(--switch-thumb)] shadow-md transition-transform duration-200 ease-in-out",
+              checked ? "translate-x-5" : "translate-x-0",
+            )}
+          />
+
+          {/* Loading indicator centered inside the switch when isLoading */}
+          {isLoading && (
+            <span className="absolute inset-0 flex items-center justify-center">
+              <svg
+                className="h-4 w-4 animate-spin text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                aria-hidden
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                />
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"
+                />
+              </svg>
+            </span>
+          )}
+        </span>
+      </label>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch };

package/dist/kits/forms/components/ui/textarea.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          // Base structural + token fallbacks
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          // CSS variable hooks (preset-first). When vars are unset, tokens above apply.
+          "border-[var(--input-border)] bg-[var(--input-bg)] text-[var(--input-fg)] placeholder:text-[var(--input-placeholder)] focus-visible:ring-[var(--input-focus-ring)] focus-visible:ring-offset-[var(--input-ring-offset)]",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/kits/forms/lib/forms/map-errors.ts

@@ -0,0 +1,29 @@
+import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import type { ApiResult } from "@/lib/server/result";
+
+export function mapApiErrorsToForm<TFieldValues extends FieldValues>(
+  form: UseFormReturn<TFieldValues>,
+  result: ApiResult<any>,
+  options?: { formKey?: string },
+): string | undefined {
+  if (!result || result.success) return undefined;
+
+  const formKey = options?.formKey ?? "form";
+  let globalMessage = result.message;
+
+  const entries = Object.entries(result.errors ?? {});
+  for (const [key, message] of entries) {
+    if (!message) continue;
+    if (key === formKey) {
+      globalMessage = message;
+      continue;
+    }
+    try {
+      form.setError(key as Path<TFieldValues>, { type: "server", message });
+    } catch {
+      globalMessage = globalMessage ?? message;
+    }
+  }
+
+  return globalMessage;
+}

package/dist/kits/forms/lib/prisma.ts

@@ -0,0 +1,16 @@
+import "server-only";
+
+import { PrismaClient } from "@prisma/client";
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClient | undefined;
+};
+
+export const prisma =
+  globalForPrisma.prisma ??
+  new PrismaClient({
+    log: ["error", "warn"],
+  });
+
+if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
+

package/dist/kits/forms/lib/utils.ts

@@ -0,0 +1,9 @@
+// Copyright (c) 2025 Jakob Bro Liebe Hansen
+// SPDX-License-Identifier: MIT
+
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}