@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,142 @@
+import {
+  splitProps,
+  type Component,
+  type JSX,
+  type ParentComponent,
+  useContext,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- 1. Bubble Variants --- */
+export const bubbleVariants = cva(
+  "relative max-w-full rounded-lg transition-colors break-words text-left select-text",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-2xs",
+        muted: "bg-muted text-foreground border border-border/50 shadow-2xs",
+        outline: "border border-border bg-background text-foreground shadow-2xs",
+        ghost: "bg-transparent text-foreground",
+      },
+      size: {
+        sm: "px-3 py-1.5 text-xs",
+        default: "px-4 py-2.5 text-sm",
+        lg: "px-5 py-3 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+/* --- 2. BubbleGroup --- */
+export interface BubbleGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const BubbleGroup: ParentComponent<BubbleGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("flex flex-col gap-1 w-full", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 3. Bubble --- */
+export interface BubbleProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bubbleVariants> {
+  class?: string;
+}
+
+export const Bubble: ParentComponent<BubbleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["variant", "size", "class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        bubbleVariants({
+          variant: local.variant,
+          size: local.size,
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 4. BubbleContent --- */
+export interface BubbleContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const BubbleContent: ParentComponent<BubbleContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("leading-relaxed", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 5. BubbleReactions --- */
+export interface BubbleReactionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const BubbleReactions: ParentComponent<BubbleReactionsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("flex items-center gap-1.5 pt-2 mt-2 border-t border-border/30 z-10 flex-wrap", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 6. BubbleReaction --- */
+export interface BubbleReactionProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  count?: number;
+  class?: string;
+}
+
+export const BubbleReaction: ParentComponent<BubbleReactionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["active", "count", "class", "children"]);
+
+  return (
+    <button
+      type="button"
+      data-active={local.active ? "true" : "false"}
+      class={cn(
+        "inline-flex items-center gap-1.5 rounded-md border border-border/70 bg-background/80 px-2 py-1 text-xs text-foreground shadow-2xs transition-all hover:bg-accent hover:border-primary/40 cursor-pointer select-none",
+        local.active && "border-primary/40 bg-primary/10 text-primary font-medium",
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="text-xs leading-none">{local.children}</span>
+      {local.count !== undefined && (
+        <span class="text-[11px] font-mono leading-none text-muted-foreground">{local.count}</span>
+      )}
+    </button>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Controls whether grouped buttons are arranged in a row or column. */
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+}
+
+/**
+ * Groups adjacent buttons into a connected control with shared borders and radii.
+ *
+ * ButtonGroup is intentionally presentational. Use Button for individual actions
+ * and compose the group with the same reactive state as the surrounding feature.
+ */
+export const ButtonGroup: Component<ButtonGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation ?? "horizontal";
+
+  return (
+    <div
+      role="group"
+      data-orientation={orientation()}
+      class={cn(
+        "isolate inline-flex",
+        orientation() === "horizontal"
+          ? "flex-row [&>button:not(:first-child)]:-ml-px [&>button:not(:first-child)]:rounded-l-none [&>button:not(:last-child)]:rounded-r-none"
+          : "flex-col [&>button:not(:first-child)]:-mt-px [&>button:not(:first-child)]:rounded-t-none [&>button:not(:last-child)]:rounded-b-none",
+        "[&>button:focus-visible]:z-10",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,82 @@
+import { Show, splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * 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 border border-primary/50",
+        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 border border-border",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "*:bg-green-600 text-zinc-50 shadow-sm hover:bg-green-600/90 dark:bg-green-900 dark:text-zinc-50 dark:hover:bg-green-900/90",
+        warning: "*:bg-yellow-600 text-zinc-50 shadow-sm hover:bg-yellow-600/90 dark:bg-yellow-900 dark:text-zinc-50 dark:hover:bg-yellow-900/90",
+        info: "*:bg-blue-600 text-zinc-50 shadow-sm hover:bg-blue-600/90 dark:bg-blue-900 dark:text-zinc-50 dark:hover:bg-blue-900/90",
+      },
+      size: {
+        xs: "h-6 rounded-md px-2 text-xs",
+        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> {
+  /** Shows a loading spinner and prevents repeated clicks while active. */
+  loading?: boolean;
+  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",
+    "loading",
+    "disabled",
+  ]);
+
+  return (
+    <button
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      disabled={local.disabled || local.loading}
+      aria-busy={local.loading ? "true" : undefined}
+      {...rest}
+    >
+      <Show when={local.loading}>
+        <Spinner size="sm" class="text-current" />
+      </Show>
+      {local.children}
+    </button>
+  );
+};

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

@@ -0,0 +1,137 @@
+import {
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  Info,
+  Lightbulb,
+  AlertTriangle,
+  AlertCircle,
+  CheckCircle2,
+  Bookmark,
+} from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const calloutVariants = cva(
+  "relative w-full rounded-lg border p-4 text-sm leading-relaxed transition-colors",
+  {
+    variants: {
+      variant: {
+        note: "border-border/80 bg-muted/50 text-foreground [&>svg]:text-foreground",
+        info: "border-sky-500/30 bg-sky-500/10 text-sky-950 dark:text-sky-100 [&>svg]:text-sky-600 dark:[&>svg]:text-sky-400",
+        tip: "border-emerald-500/30 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+        warning: "border-amber-500/30 bg-amber-500/10 text-amber-950 dark:text-amber-100 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400",
+        danger: "border-destructive/30 bg-destructive/10 text-destructive dark:text-red-200 [&>svg]:text-destructive",
+        success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-950 dark:text-emerald-100 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+      },
+    },
+    defaultVariants: {
+      variant: "note",
+    },
+  }
+);
+
+const defaultIcons = {
+  note: Bookmark,
+  info: Info,
+  tip: Lightbulb,
+  warning: AlertTriangle,
+  danger: AlertCircle,
+  success: CheckCircle2,
+};
+
+export interface CalloutProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof calloutVariants> {
+  title?: string;
+  type?: VariantProps<typeof calloutVariants>["variant"];
+  icon?: Component<{ class?: string }> | false;
+  class?: string;
+}
+
+export const Callout: ParentComponent<CalloutProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "type",
+    "title",
+    "icon",
+    "class",
+    "children",
+  ]);
+
+  const variant = () => local.variant || local.type || "note";
+
+  const IconComponent = () => {
+    if (local.icon === false) return null;
+    if (local.icon) return local.icon;
+    return defaultIcons[variant()] || Info;
+  };
+
+  return (
+    <div
+      role="region"
+      aria-label={local.title || `${variant()} callout`}
+      class={cn(
+        calloutVariants({ variant: variant() }),
+        "flex gap-3.5 items-start",
+        local.class
+      )}
+      {...rest}
+    >
+      <Show when={IconComponent()}>
+        {(Icon) => (
+          <span class="inline-flex shrink-0 items-center justify-center mt-0.5 select-none">
+            <Dynamic component={Icon()} class="size-4.5 shrink-0" />
+          </span>
+        )}
+      </Show>
+      <div class="flex-1 space-y-1 min-w-0">
+        <Show when={local.title}>
+          <h5 class="font-semibold text-sm leading-none tracking-tight">
+            {local.title}
+          </h5>
+        </Show>
+        <div class="text-sm opacity-90 leading-relaxed break-words">
+          {local.children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export interface CalloutTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const CalloutTitle: ParentComponent<CalloutTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <h5
+      class={cn("font-semibold text-sm leading-none tracking-tight mb-1", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </h5>
+  );
+};
+
+export interface CalloutDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const CalloutDescription: ParentComponent<CalloutDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div
+      class={cn("text-sm opacity-90 leading-relaxed", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/dist/vendor/core-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/dist/vendor/core-src/registry/components/ui/checkbox.tsx

@@ -0,0 +1,74 @@
+import { splitProps, Show, type Component, type JSX } from "solid-js";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
+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) => {
+  const [local, rest] = splitProps(props, [
+    "checked",
+    "defaultChecked",
+    "onChange",
+    "disabled",
+    "class",
+    "onClick",
+  ]);
+
+  const [isChecked, setIsChecked] = createControllableSignal({
+    value: () => local.checked,
+    defaultValue: local.defaultChecked ?? false,
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const toggle = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+    setIsChecked(!isChecked());
+
+    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>
+  );
+};