@nikala-ui/core 0.6.0

package/src/registry/components/ui/banner.tsx

@@ -0,0 +1,189 @@
+// src/components/ui/banner.tsx
+import {
+  createSignal,
+  onMount,
+  onCleanup,
+  Show,
+  splitProps,
+  type Component,
+  type JSX,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Info, AlertTriangle, CheckCircle, AlertCircle, X } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const bannerVariants = cva(
+  "relative flex w-full items-center justify-between gap-3 px-4 py-2.5 text-sm transition-all duration-300 ease-in-out",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-zinc-900 text-zinc-50 dark:bg-zinc-100 dark:text-zinc-900",
+        warning:
+          "bg-amber-500/15 text-amber-900 border-b border-amber-500/20 dark:text-amber-200",
+        info:
+          "bg-sky-500/15 text-sky-900 border-b border-sky-500/20 dark:text-sky-200",
+        success:
+          "bg-emerald-500/15 text-emerald-900 border-b border-emerald-500/20 dark:text-emerald-200",
+        destructive:
+          "bg-rose-500/15 text-rose-900 border-b border-rose-500/20 dark:text-rose-200",
+        pirosmani:
+          "bg-[#722f37] text-white border-b border-[#8a3943] shadow-sm",
+      },
+      sticky: {
+        true: "sticky top-0 z-50 backdrop-blur-sm",
+        false: "relative",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      sticky: false,
+    },
+  }
+);
+
+export interface BannerProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  dismissible?: boolean;
+  autoHideDelay?: number;
+  storageKey?: string;
+  showIcon?: boolean;
+  icon?: Component<{ class?: string }>;
+  link?: string;
+  linkText?: string;
+  linkTarget?: string;
+  onDismiss?: () => void;
+  class?: string;
+}
+
+/**
+ * Nikala UI Banner Component.
+ */
+export const Banner: Component<BannerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "sticky",
+    "dismissible",
+    "autoHideDelay",
+    "storageKey",
+    "showIcon",
+    "icon",
+    "link",
+    "linkText",
+    "linkTarget",
+    "onDismiss",
+    "class",
+    "children",
+  ]);
+
+  const [visible, setVisible] = createSignal(true);
+  let timerId: ReturnType<typeof setTimeout> | undefined;
+
+  onMount(() => {
+    if (local.storageKey) {
+      try {
+        const isDismissed = localStorage.getItem(local.storageKey);
+        if (isDismissed === "true") {
+          setVisible(false);
+          return;
+        }
+      } catch (e) { }
+    }
+
+    if (local.autoHideDelay && local.autoHideDelay > 0) {
+      timerId = setTimeout(() => {
+        handleDismiss();
+      }, local.autoHideDelay);
+    }
+  });
+
+  onCleanup(() => {
+    if (timerId) clearTimeout(timerId);
+  });
+
+  const handleDismiss = () => {
+    setVisible(false);
+
+    if (local.storageKey) {
+      try {
+        localStorage.setItem(local.storageKey, "true");
+      } catch (e) {}
+    }
+
+    if (typeof local.onDismiss === "function") {
+      local.onDismiss();
+    }
+  };
+
+  /* Default icon selector based on banner variant */
+  const getDefaultIcon = () => {
+    switch (local.variant) {
+      case "warning":
+        return AlertTriangle;
+      case "success":
+        return CheckCircle;
+      case "destructive":
+        return AlertCircle;
+      default:
+        return Info;
+    }
+  };
+
+  const activeIcon = () => local.icon || getDefaultIcon();
+  const shouldShowIcon = () => local.showIcon !== false;
+  const shouldBeDismissible = () => local.dismissible !== false;
+
+  return (
+    <Show when={visible()}>
+      <div
+        class={cn(
+          bannerVariants({ variant: local.variant, sticky: local.sticky }),
+          local.class
+        )}
+        {...rest}
+      >
+        <div class="flex flex-1 items-center justify-center gap-2 text-center sm:text-left">
+          {/* Dynamic Lucide Icon */}
+          <Show when={shouldShowIcon()}>
+            <span class="inline-flex shrink-0 items-center justify-center">
+              <Dynamic component={activeIcon()} class="h-4 w-4 opacity-80" />
+            </span>
+          </Show>
+
+          {/* Text Content */}
+          <div class="flex-1 text-xs font-medium sm:text-sm">
+            {local.children}
+          </div>
+
+          {/* Action Link */}
+          <Show when={local.link}>
+            <div class="shrink-0">
+              <a
+                href={local.link}
+                target={local.linkTarget || "_blank"}
+                rel="noreferrer"
+                class="underline font-semibold hover:opacity-80 transition-opacity"
+              >
+                {local.linkText || "Learn more"}
+              </a>
+            </div>
+          </Show>
+        </div>
+
+        {/* Close Button */}
+        <Show when={shouldBeDismissible()}>
+          <button
+            type="button"
+            onClick={handleDismiss}
+            class="shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
+            aria-label="Dismiss banner"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </Show>
+      </div>
+    </Show>
+  );
+};

package/src/registry/components/ui/breadcrumb.tsx

@@ -0,0 +1,136 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface BreadcrumbProps extends JSX.HTMLAttributes<HTMLElement> {
+  class?: string;
+}
+
+/**
+ * Root navigation container for the Nikala UI Breadcrumb hierarchy.
+ */
+export const Breadcrumb: Component<BreadcrumbProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <nav aria-label="breadcrumb" class={cn("relative w-full", local.class)} {...rest} />;
+};
+
+export interface BreadcrumbListProps extends JSX.HTMLAttributes<HTMLOListElement> {
+  class?: string;
+}
+
+/**
+ * Ordered list container housing all breadcrumb path items.
+ */
+export const BreadcrumbList: Component<BreadcrumbListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <ol
+      class={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground break-words sm:gap-2.5",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+}
+
+/**
+ * Individual list item element wrapper in the breadcrumb hierarchy.
+ */
+export const BreadcrumbItem: Component<BreadcrumbItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return <li class={cn("inline-flex items-center gap-1.5", local.class)} {...rest} />;
+};
+
+export interface BreadcrumbLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  class?: string;
+}
+
+/**
+ * Clickable breadcrumb trail link element.
+ */
+export const BreadcrumbLink: Component<BreadcrumbLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <a
+      class={cn(
+        "transition-colors hover:text-foreground underline-offset-4 hover:underline",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbPageProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+/**
+ * Non-clickable active page indicator in breadcrumb hierarchy.
+ */
+export const BreadcrumbPage: Component<BreadcrumbPageProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      class={cn("font-normal text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface BreadcrumbSeparatorProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+}
+
+/**
+ * Visual separator icon rendered between breadcrumb path links.
+ */
+export const BreadcrumbSeparator: Component<BreadcrumbSeparatorProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      class={cn("[&>svg]:size-3.5 text-muted-foreground", local.class)}
+      {...rest}
+    >
+      {local.children || (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+      )}
+    </li>
+  );
+};
+
+export interface BreadcrumbEllipsisProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+/**
+ * Ellipsis element representing truncated intermediate breadcrumb items.
+ */
+export const BreadcrumbEllipsis: Component<BreadcrumbEllipsisProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      class={cn("flex h-9 w-9 items-center justify-center text-muted-foreground", local.class)}
+      {...rest}
+    >
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="1" />
+        <circle cx="19" cy="12" r="1" />
+        <circle cx="5" cy="12" r="1" />
+      </svg>
+    </span>
+  );
+};

package/src/registry/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/**
+ * Class variance authority configuration for button styling variants and sizes.
+ */
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-red-600 text-zinc-50 shadow-sm hover:bg-red-600/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+/**
+ * Props interface for the Button component extending standard HTML button attributes.
+ */
+export interface ButtonProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Button component built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Button: Component<ButtonProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity for destructured props
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+
+  return (
+    <button
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};

package/src/registry/components/ui/card.tsx

@@ -0,0 +1,113 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Root Card container component.
+ */
+export const Card: Component<CardProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface CardHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Header wrapper for the Card component.
+ */
+export const CardHeader: Component<CardHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col space-y-1.5 p-6", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+/**
+ * Main title heading for the Card header.
+ */
+export const CardTitle: Component<CardTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h3
+      class={cn("font-semibold leading-none tracking-tight text-lg", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface CardDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+/**
+ * Subtitle description text for the Card header.
+ */
+export const CardDescription: Component<CardDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Main body content area for the Card.
+ */
+export const CardContent: Component<CardContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("p-6 pt-0", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Footer action area for the Card.
+ */
+export const CardFooter: Component<CardFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex items-center p-6 pt-0", local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/components/ui/checkbox.tsx

@@ -0,0 +1,85 @@
+import { createSignal, splitProps, Show, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface CheckboxProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Uncontrolled default checked state */
+  defaultChecked?: boolean;
+  /** Event handler triggered when checked state changes */
+  onChange?: (checked: boolean) => void;
+  class?: string;
+}
+
+/**
+ * Nikala UI Checkbox component built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Checkbox: Component<CheckboxProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity
+  const [local, rest] = splitProps(props, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "disabled",
+    "class",
+    "onClick",
+  ]);
+
+  // Internal state for uncontrolled mode
+  const [internalChecked, setInternalChecked] = createSignal(
+    local.defaultChecked ?? false
+  );
+
+  // Computed checked state
+  const isChecked = () =>
+    local.checked !== undefined ? local.checked : internalChecked();
+
+  const toggle = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+
+    const nextState = !isChecked();
+    if (local.checked === undefined) {
+      setInternalChecked(nextState);
+    }
+
+    if (typeof local.onChange === "function") {
+      local.onChange(nextState);
+    }
+
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isChecked()}
+      data-state={isChecked() ? "checked" : "unchecked"}
+      disabled={local.disabled}
+      onClick={toggle}
+      class={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={isChecked()}>
+        <svg
+          class="h-3.5 w-3.5 fill-none stroke-current stroke-[3]"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      </Show>
+    </button>
+  );
+};