@nikala-ui/docs 0.12.0

package/dist/vendor/core-src/registry/components/ui/empty.tsx

@@ -0,0 +1,83 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface EmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A centered layout for empty collections, search results, and initial states. */
+export const Empty: Component<EmptyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "flex min-h-64 w-full flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card/30 p-6 text-center",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyIcon: Component<EmptyIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "mb-4 flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-6",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const EmptyTitle: Component<EmptyTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h3
+      class={cn("text-lg font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const EmptyDescription: Component<EmptyDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 max-w-sm text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface EmptyActionProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const EmptyAction: Component<EmptyActionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class={cn("mt-5 flex items-center gap-2", local.class)} {...rest} />
+  );
+};

package/dist/vendor/core-src/registry/components/ui/field.tsx

@@ -0,0 +1,71 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { Label, type LabelProps } from "@/components/ui/label";
+
+export interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/** A consistent layout wrapper for labels, controls, descriptions, and errors. */
+export const Field: Component<FieldProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("grid w-full gap-1.5", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+export interface FieldLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement>, LabelProps {
+  class?: string;
+  for?: string;
+  children?: JSX.Element;
+}
+
+export const FieldLabel: Component<FieldLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <Label class={cn("text-sm font-medium", local.class)} {...rest}>
+      {local.children}
+    </Label>
+  );
+};
+
+export interface FieldDescriptionProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldDescription: Component<FieldDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};
+
+export interface FieldErrorProps
+  extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FieldError: Component<FieldErrorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      role="alert"
+      class={cn("text-sm font-medium text-destructive", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/file-tree.tsx

@@ -0,0 +1,181 @@
+import {
+  createSignal,
+  splitProps,
+  Show,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import {
+  Folder,
+  FolderOpen,
+  File,
+  FileCode,
+  FileJson,
+  FileText,
+  ChevronRight,
+} from "lucide-solid";
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/cn";
+
+export interface FileTreeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Root FileTree container for displaying project directory hierarchies.
+ */
+export const FileTree: ParentComponent<FileTreeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div
+      class={cn(
+        "my-4 w-full rounded-lg border border-border bg-card/60 p-3 font-mono text-sm shadow-2xs select-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="space-y-0.5">{local.children}</div>
+    </div>
+  );
+};
+
+export interface FileTreeFolderProps {
+  /** Folder name */
+  name: string;
+  /** Initial open state of the folder (default: true) */
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback fired when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Custom folder icon override */
+  icon?: JSX.Element;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Collapsible folder node in the FileTree.
+ */
+export const FileTreeFolder: ParentComponent<FileTreeFolderProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "name",
+    "defaultOpen",
+    "open",
+    "onOpenChange",
+    "icon",
+    "class",
+    "children",
+  ]);
+
+  const [isOpen, setIsOpen] = createSignal(local.defaultOpen ?? true);
+
+  const openState = () => (local.open !== undefined ? local.open : isOpen());
+
+  const handleToggle = (next: boolean) => {
+    if (local.open === undefined) {
+      setIsOpen(next);
+    }
+    local.onOpenChange?.(next);
+  };
+
+  return (
+    <Collapsible
+      open={openState()}
+      onOpenChange={handleToggle}
+      class={cn("w-full", local.class)}
+      {...rest}
+    >
+      <CollapsibleTrigger class="group flex w-full items-center justify-start gap-1.5 rounded-md px-1.5 py-1 text-xs text-foreground transition-colors hover:bg-muted/70 cursor-pointer">
+        <ChevronRight
+          class={cn(
+            "size-3.5 shrink-0 text-muted-foreground transition-transform duration-200",
+            openState() && "rotate-90 text-foreground"
+          )}
+        />
+        <Show
+          when={local.icon}
+          fallback={
+            <Show
+              when={openState()}
+              fallback={<Folder class="size-3.5 shrink-0 text-amber-500/90 dark:text-amber-400" />}
+            >
+              <FolderOpen class="size-3.5 shrink-0 text-amber-500 dark:text-amber-400" />
+            </Show>
+          }
+        >
+          {local.icon}
+        </Show>
+        <span class="font-medium text-foreground tracking-tight">{local.name}</span>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent class="border-l border-border/60 ml-3.5 pl-3 pt-0.5 space-y-0.5">
+        {local.children}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};
+
+export interface FileTreeFileProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** File name */
+  name: string;
+  /** Custom file icon override */
+  icon?: JSX.Element;
+  class?: string;
+}
+
+/**
+ * Returns a smart default Lucide icon based on file extension.
+ */
+function getFileIcon(filename: string): JSX.Element {
+  const ext = filename.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "tsx":
+    case "jsx":
+    case "ts":
+    case "js":
+    case "mjs":
+    case "rs":
+    case "py":
+    case "go":
+      return <FileCode class="size-3.5 shrink-0 text-sky-500 dark:text-sky-400" />;
+    case "json":
+      return <FileJson class="size-3.5 shrink-0 text-amber-500 dark:text-amber-400" />;
+    case "md":
+    case "mdx":
+    case "txt":
+      return <FileText class="size-3.5 shrink-0 text-emerald-500 dark:text-emerald-400" />;
+    default:
+      return <File class="size-3.5 shrink-0 text-muted-foreground" />;
+  }
+}
+
+/**
+ * Leaf file item inside a FileTree.
+ */
+export const FileTreeFile: ParentComponent<FileTreeFileProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "icon", "class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex w-full items-center justify-start gap-1.5 rounded-md px-1.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground cursor-default",
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="size-3.5 shrink-0" />
+      <Show when={local.icon} fallback={getFileIcon(local.name)}>
+        {local.icon}
+      </Show>
+      <span class="tracking-tight">{local.name}</span>
+      <Show when={local.children}>
+        <div class="ml-auto">{local.children}</div>
+      </Show>
+    </div>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/footer.tsx

@@ -0,0 +1,247 @@
+import { splitProps, type JSX, type ParentComponent, type Component } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- Root Footer --- */
+export const footerVariants = cva("w-full transition-colors", {
+  variants: {
+    variant: {
+      default: "bg-background border-t border-border/60 text-foreground",
+      muted: "bg-muted/40 border-t border-border text-foreground",
+      bordered: "bg-background border-t-2 border-border text-foreground",
+      floating: "my-8 rounded-lg border border-border/80 bg-card text-card-foreground shadow-xs",
+      transparent: "bg-transparent border-transparent text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface FooterProps
+  extends JSX.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof footerVariants> {
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+}
+
+export const Footer: ParentComponent<FooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "maxWidth", "children"]);
+
+  const maxWidthClass = () => {
+    switch (local.maxWidth) {
+      case "sm":
+        return "max-w-screen-sm";
+      case "md":
+        return "max-w-screen-md";
+      case "lg":
+        return "max-w-screen-lg";
+      case "xl":
+        return "max-w-screen-xl";
+      case "full":
+        return "max-w-full";
+      case "2xl":
+      default:
+        return "max-w-screen-2xl";
+    }
+  };
+
+  return (
+    <footer
+      class={cn(
+        footerVariants({ variant: local.variant }),
+        local.variant === "floating" && cn("mx-auto", maxWidthClass()),
+        local.class
+      )}
+      {...rest}
+    >
+      <div class={cn("w-full", local.variant !== "floating" && cn("mx-auto", maxWidthClass()))}>
+        {local.children}
+      </div>
+    </footer>
+  );
+};
+
+/* --- Footer Container --- */
+export interface FooterContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterContainer: ParentComponent<FooterContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("px-4 sm:px-6 lg:px-8 py-10 sm:py-12 md:py-16 w-full", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Content (Columns Grid / Layout) --- */
+export interface FooterContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterContent: ParentComponent<FooterContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 lg:gap-12",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Column --- */
+export interface FooterColumnProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterColumn: ParentComponent<FooterColumnProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("flex flex-col space-y-3", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Column Title --- */
+export interface FooterColumnTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const FooterColumnTitle: ParentComponent<FooterColumnTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <h4
+      class={cn(
+        "text-xs font-semibold uppercase tracking-wider text-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </h4>
+  );
+};
+
+/* --- Footer Column List --- */
+export interface FooterColumnListProps extends JSX.HTMLAttributes<HTMLUListElement> {
+  class?: string;
+}
+
+export const FooterColumnList: ParentComponent<FooterColumnListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <ul class={cn("space-y-2 list-none p-0 m-0", local.class)} {...rest}>
+      {local.children}
+    </ul>
+  );
+};
+
+/* --- Footer Link --- */
+export interface FooterLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  class?: string;
+}
+
+export const FooterLink: ParentComponent<FooterLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <li>
+      <a
+        class={cn(
+          "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </a>
+    </li>
+  );
+};
+
+/* --- Footer Brand / Info Section --- */
+export interface FooterBrandProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterBrand: ParentComponent<FooterBrandProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "col-span-2 sm:col-span-2 md:col-span-4 lg:col-span-2 flex flex-col space-y-3 mb-4 lg:mb-0",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Bottom (Copyright and Secondary Links Bar) --- */
+export interface FooterBottomProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterBottom: ParentComponent<FooterBottomProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mt-12 sm:mt-16 pt-8 border-t border-border/50 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Copyright Text --- */
+export interface FooterCopyrightProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FooterCopyright: ParentComponent<FooterCopyrightProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p class={cn("text-xs text-muted-foreground leading-relaxed", local.class)} {...rest}>
+      {local.children}
+    </p>
+  );
+};
+
+/* --- Footer Social Links Container --- */
+export interface FooterSocialsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterSocials: ParentComponent<FooterSocialsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("flex items-center gap-3 text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/form-message.tsx

@@ -0,0 +1,36 @@
+import { Show, splitProps, type JSX } from "solid-js";
+import type { CreateFormReturn } from "@/hooks/create-form";
+import { FieldError, type FieldErrorProps } from "@/components/ui/field";
+
+type FormState<T extends Record<string, any>> = Pick<
+  CreateFormReturn<T>,
+  "errors" | "touched"
+>;
+
+export interface FormMessageProps<
+  T extends Record<string, any>,
+  K extends keyof T,
+> extends Omit<FieldErrorProps, "children"> {
+  form: FormState<T>;
+  name: K;
+  /** Show the message even before the field has been touched. */
+  showUntouched?: boolean;
+}
+
+/** Displays a field's validation error from createForm when it should be visible. */
+export function FormMessage<
+  T extends Record<string, any>,
+  K extends keyof T,
+>(props: FormMessageProps<T, K>): JSX.Element {
+  const [local, rest] = splitProps(props, ["form", "name", "showUntouched", "class"]);
+  const error = () => local.form.errors()[local.name] as string | undefined;
+  const touched = () => local.form.touched()[local.name] === true;
+
+  return (
+    <Show when={error() && (local.showUntouched || touched())}>
+      <FieldError class={local.class} {...rest}>
+        {error()}
+      </FieldError>
+    </Show>
+  );
+}

package/dist/vendor/core-src/registry/components/ui/form.tsx

@@ -0,0 +1,21 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
+  /** Indicates that the form is currently processing a submission. */
+  loading?: boolean;
+  class?: string;
+}
+
+/** A semantic form layout wrapper designed to work with the createForm hook. */
+export const Form: Component<FormProps> = (props) => {
+  const [local, rest] = splitProps(props, ["loading", "class"]);
+
+  return (
+    <form
+      aria-busy={local.loading ? "true" : undefined}
+      class={cn("w-full space-y-5", local.class)}
+      {...rest}
+    />
+  );
+};