@nikala-ui/core 0.0.0-nightly.bb5956a

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

@@ -0,0 +1,204 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createControllableSignal } from "@nikala-ui/hooks";
+import { cn } from "@/lib/cn";
+
+interface TabsContextValue {
+  value: Accessor<string | undefined>;
+  setValue: (value: string) => void;
+  orientation: Accessor<"horizontal" | "vertical">;
+}
+
+const TabsContext = createContext<TabsContextValue>();
+
+export interface TabsProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Controlled active tab value */
+  value?: string;
+  /** Uncontrolled default active tab value */
+  defaultValue?: string;
+  /** Callback fired when active tab changes */
+  onChange?: (value: string) => void;
+  /** Layout orientation of tab triggers and content */
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+}
+
+/**
+ * Root Tabs container component managing active tab context state and orientation.
+ */
+export const Tabs: Component<TabsProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "onChange",
+    "orientation",
+    "class",
+    "children",
+  ]);
+
+  const [currentValue, setCurrentValue] = createControllableSignal<string>({
+    value: () => local.value,
+    defaultValue: local.defaultValue,
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const orientation = () => local.orientation || "horizontal";
+
+  const contextValue: TabsContextValue = {
+    value: currentValue,
+    setValue: (val: string) => setCurrentValue(val),
+    orientation,
+  };
+
+  return (
+    <TabsContext.Provider value={contextValue}>
+      <div
+        data-orientation={orientation()}
+        class={cn(
+          "w-full",
+          orientation() === "vertical" ? "flex flex-row gap-4" : "flex flex-col gap-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </TabsContext.Provider>
+  );
+};
+
+export interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Container wrapper for Tab triggers.
+ */
+export const TabsList: Component<TabsListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const context = useContext(TabsContext);
+
+  const isVertical = () => context?.orientation() === "vertical";
+
+  return (
+    <div
+      role="tablist"
+      aria-orientation={context?.orientation() || "horizontal"}
+      class={cn(
+        "inline-flex rounded-lg bg-muted p-1 text-muted-foreground",
+        isVertical()
+          ? "flex-col h-auto w-auto items-stretch justify-start"
+          : "h-9 items-center justify-center",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+export interface TabsTriggerProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+  /** Unique value identifier for this tab */
+  value: string;
+  class?: string;
+}
+
+/**
+ * Tab button trigger to activate a specific tab panel.
+ */
+export const TabsTrigger: Component<TabsTriggerProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "disabled",
+    "class",
+    "children",
+    "onClick",
+  ]);
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("TabsTrigger must be used within a Tabs component");
+  }
+
+  const isSelected = () => context.value() === local.value;
+  const isVertical = () => context.orientation() === "vertical";
+
+  const handleClick = (
+    e: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }
+  ) => {
+    if (local.disabled) return;
+    context.setValue(local.value);
+    if (typeof local.onClick === "function") {
+      local.onClick(e);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isSelected()}
+      data-state={isSelected() ? "active" : "inactive"}
+      data-orientation={context.orientation()}
+      disabled={local.disabled}
+      onClick={handleClick}
+      class={cn(
+        "inline-flex items-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm cursor-pointer",
+        isVertical() ? "justify-start py-1.5" : "justify-center",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};
+
+export interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Value matching the corresponding tab trigger */
+  value: string;
+  class?: string;
+}
+
+/**
+ * Content panel revealed when the associated tab is active.
+ */
+export const TabsContent: Component<TabsContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["value", "class", "children"]);
+  const context = useContext(TabsContext);
+
+  if (!context) {
+    throw new Error("TabsContent must be used within a Tabs component");
+  }
+
+  const isSelected = () => context.value() === local.value;
+  const isVertical = () => context.orientation() === "vertical";
+
+  return (
+    <Show when={isSelected()}>
+      <div
+        role="tabpanel"
+        data-state={isSelected() ? "active" : "inactive"}
+        data-orientation={context.orientation()}
+        class={cn(
+          "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          isVertical() ? "flex-1 mt-0" : "mt-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </Show>
+  );
+};

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

@@ -0,0 +1,82 @@
+// src/components/ui/textarea.tsx
+import {
+  createSignal,
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+} from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface TextareaProps
+  extends JSX.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Uncontrolled initial default value */
+  defaultValue?: string | number;
+  /** Maximum allowed character limit */
+  maxLength?: number;
+  /** Whether to show live character count badge */
+  showCount?: boolean;
+  class?: string;
+}
+
+/**
+ * Nikala UI Textarea component with optional live character counter and limit indicators.
+ */
+export const Textarea: Component<TextareaProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "maxLength",
+    "showCount",
+    "value",
+    "defaultValue",
+    "onInput",
+    "class",
+  ]);
+
+  /* Internal reactive signal for character count tracking */
+  const [currentValue, setCurrentValue] = createSignal<string>(
+    String(local.value || local.defaultValue || "")
+  );
+
+  const handleInput: JSX.EventHandlerUnion<HTMLTextAreaElement, InputEvent> = (
+    e
+  ) => {
+    setCurrentValue(e.currentTarget.value);
+    if (typeof local.onInput === "function") {
+      (local.onInput as (e: InputEvent) => void)(e);
+    }
+  };
+
+  const count = () => currentValue().length;
+  const isAtLimit = () =>
+    local.maxLength !== undefined && count() >= local.maxLength;
+
+  return (
+    <div class="relative flex flex-col w-full">
+      <textarea
+        value={local.value !== undefined ? String(local.value) : currentValue()}
+        maxLength={local.maxLength}
+        onInput={handleInput}
+        class={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-2xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          local.class
+        )}
+        {...rest}
+      />
+
+      {/* Dynamic Character Counter */}
+      <Show when={local.showCount ?? Boolean(local.maxLength)}>
+        <div
+          class={cn(
+            "mt-1 text-right text-[11px] font-mono transition-colors select-none",
+            isAtLimit() ? "text-rose-500 font-bold" : "text-muted-foreground"
+          )}
+        >
+          <span>{count()}</span>
+          <Show when={local.maxLength}>
+            <span> / {local.maxLength}</span>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  );
+};

package/src/registry/components/ui/theme-toggle.tsx

@@ -0,0 +1,200 @@
+import { splitProps, type Component, For, Show } from "solid-js";
+import { Sun, Moon, Monitor } from "lucide-solid";
+import {
+  useTheme,
+  type AccentColor,
+  type Radius,
+  type Theme,
+} from "../../providers/theme-provider";
+import {
+  runThemeTransition,
+  type ThemeEffect,
+} from "../../providers/theme-transitions";
+import { Button } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./dropdown-menu";
+import { cn } from "@/lib/cn";
+
+import { createColorMode } from "@nikala-ui/hooks";
+
+export interface ThemeToggleProps {
+  /** Display mode: "mini" for compact dropdown, "max" for full customizer panel (default: "mini") */
+  mode?: "mini" | "max";
+  /** Transition animation effect when changing themes ("none", "circular", "fade") */
+  effect?: ThemeEffect;
+  class?: string;
+}
+
+const ACCENT_OPTIONS: { name: AccentColor; label: string; color: string }[] = [
+  { name: "wine", label: "Wine", color: "bg-[#722f37]" },
+  { name: "violet", label: "Violet", color: "bg-[#7c3aed]" },
+  { name: "sky", label: "Sky", color: "bg-[#0284c7]" },
+  { name: "emerald", label: "Emerald", color: "bg-[#059669]" },
+  { name: "rose", label: "Rose", color: "bg-[#e11d48]" },
+  { name: "amber", label: "Amber", color: "bg-[#d97706]" },
+  { name: "zinc", label: "Zinc", color: "bg-[#18181b]" },
+];
+
+const RADIUS_OPTIONS: { value: Radius; label: string }[] = [
+  { value: "0", label: "0" },
+  { value: "0.3", label: "0.3" },
+  { value: "0.5", label: "0.5" },
+  { value: "0.75", label: "0.75" },
+  { value: "1.0", label: "1.0" },
+];
+
+/**
+ * Interactive UI theme switcher supporting mini/max modes and View Transition animations.
+ */
+export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
+  const [local] = splitProps(props, ["mode", "effect", "class"]);
+  const { theme, setTheme, accent, setAccent, radius, setRadius } = useTheme();
+
+  const colorMode = createColorMode({
+    initialValue: theme(),
+    storageKey: "nikala-theme-mode",
+  });
+
+  const mode = () => local.mode || "mini";
+  const effect = () => local.effect || "none";
+
+  /* Reactive accessor determining whether dark mode is active via createColorMode hook */
+  const isDarkMode = () => {
+    const currentTheme = theme();
+    if (currentTheme === "dark") return true;
+    if (currentTheme === "light") return false;
+    return colorMode.isDark();
+  };
+
+  const changeThemeWithEffect = (newTheme: Theme, e: MouseEvent) => {
+    runThemeTransition(effect(), e, () => {
+      setTheme(newTheme);
+      colorMode.setMode(newTheme);
+    });
+  };
+
+  return (
+    <DropdownMenu placement="bottom-end">
+      <DropdownMenuTrigger
+        as={Button}
+        variant="outline"
+        size="icon"
+        class={cn("relative h-9 w-9 cursor-pointer", local.class)}
+      >
+        {/* Reactive Sun / Moon Icon Toggle */}
+        <Show
+          when={isDarkMode()}
+          fallback={<Sun class="h-4 w-4 text-foreground transition-transform" />}
+        >
+          <Moon class="h-4 w-4 text-foreground transition-transform" />
+        </Show>
+
+        <span class="sr-only">Toggle theme</span>
+      </DropdownMenuTrigger>
+
+      <Show
+        when={mode() === "max"}
+        fallback={
+          /* Mini Mode: Compact Dropdown */
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect("light", e)}>
+              <Sun class="mr-2 h-4 w-4 text-muted-foreground" />
+              Light
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect("dark", e)}>
+              <Moon class="mr-2 h-4 w-4 text-muted-foreground" />
+              Dark
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect("system", e)}>
+              <Monitor class="mr-2 h-4 w-4 text-muted-foreground" />
+              System
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        }
+      >
+        {/* Max Mode: Full Theme Customizer Panel */}
+        <DropdownMenuContent class="w-64 p-3">
+          <DropdownMenuLabel class="px-0 pt-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Theme Mode
+          </DropdownMenuLabel>
+          <div class="grid grid-cols-3 gap-1 my-1.5">
+            <Button
+              variant={theme() === "light" ? "default" : "outline"}
+              size="sm"
+              onClick={(e: MouseEvent) => changeThemeWithEffect("light", e)}
+              class="h-8 text-xs cursor-pointer"
+            >
+              Light
+            </Button>
+            <Button
+              variant={theme() === "dark" ? "default" : "outline"}
+              size="sm"
+              onClick={(e: MouseEvent) => changeThemeWithEffect("dark", e)}
+              class="h-8 text-xs cursor-pointer"
+            >
+              Dark
+            </Button>
+            <Button
+              variant={theme() === "system" ? "default" : "outline"}
+              size="sm"
+              onClick={(e: MouseEvent) => changeThemeWithEffect("system", e)}
+              class="h-8 text-xs cursor-pointer"
+            >
+              System
+            </Button>
+          </div>
+
+          <DropdownMenuSeparator class="my-2" />
+
+          <DropdownMenuLabel class="px-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Brand Accent Color
+          </DropdownMenuLabel>
+          <div class="flex flex-wrap gap-1.5 my-1.5">
+            <For each={ACCENT_OPTIONS}>
+              {(opt) => (
+                <button
+                  type="button"
+                  title={opt.label}
+                  onClick={() => setAccent(opt.name)}
+                  class={cn(
+                    "h-6 w-6 rounded-md transition-all cursor-pointer border border-border flex items-center justify-center",
+                    opt.color,
+                    accent() === opt.name ? "ring-2 ring-primary ring-offset-2 ring-offset-background scale-110" : "hover:scale-105"
+                  )}
+                />
+              )}
+            </For>
+          </div>
+
+          <DropdownMenuSeparator class="my-2" />
+
+          <DropdownMenuLabel class="px-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Border Radius
+          </DropdownMenuLabel>
+          <div class="grid grid-cols-5 gap-1 my-1.5">
+            <For each={RADIUS_OPTIONS}>
+              {(r) => (
+                <Button
+                  variant={radius() === r.value ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setRadius(r.value)}
+                  class="h-7 text-xs px-1 cursor-pointer"
+                >
+                  {r.label}
+                </Button>
+              )}
+            </For>
+          </div>
+        </DropdownMenuContent>
+      </Show>
+    </DropdownMenu>
+  );
+};

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

@@ -0,0 +1,124 @@
+import { splitProps, type Component, type JSX, type ComponentProps } from "solid-js";
+import { Toast as KobalteToast, toaster } from "@kobalte/core/toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X, CircleCheck, Info, CircleAlert, TriangleAlert } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-lg border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--kb-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--kb-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[opened]:animate-in data-[closed]:animate-out data-[swipe=end]:animate-out data-[closed]:fade-out-80 data-[closed]:slide-out-to-right-full data-[opened]:slide-in-from-top-full data-[opened]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-background text-foreground",
+        success: "border-emerald-500/20 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 border-emerald-500/30",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive dark:text-red-300",
+        warning: "border-amber-500/20 bg-amber-500/10 text-amber-900 dark:text-amber-200 border-amber-500/30",
+        info: "border-sky-500/20 bg-sky-500/10 text-sky-900 dark:text-sky-200 border-sky-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface ToastProps
+  extends ComponentProps<typeof KobalteToast>,
+    VariantProps<typeof toastVariants> {
+  class?: string;
+}
+
+export const Toast: Component<ToastProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant"]);
+
+  return (
+    <KobalteToast
+      class={cn(toastVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastTitle: Component<ComponentProps<typeof KobalteToast.Title>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Title
+      class={cn("text-sm font-semibold [&+div]:text-xs", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastDescription: Component<ComponentProps<typeof KobalteToast.Description>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Description
+      class={cn("text-sm opacity-90", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export const ToastCloseButton: Component<ComponentProps<typeof KobalteToast.CloseButton>> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <KobalteToast.CloseButton
+      class={cn(
+        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <X class="h-4 w-4" />}
+    </KobalteToast.CloseButton>
+  );
+};
+
+export const ToastRegion: Component<ComponentProps<typeof KobalteToast.Region>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteToast.Region
+      class={cn(
+        "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export const ToastList: Component<ComponentProps<typeof KobalteToast.List>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return <KobalteToast.List class={cn("flex flex-col gap-2", local.class)} {...rest} />;
+};
+
+/* --- Helper Function to Trigger Toast Notifications --- */
+export interface ShowToastOptions {
+  title: string;
+  description?: string;
+  variant?: "default" | "success" | "destructive" | "warning" | "info";
+  duration?: number;
+}
+
+export const showToast = (options: ShowToastOptions) => {
+  return toaster.show((props) => (
+    <Toast toastId={props.toastId} variant={options.variant || "default"}>
+      <div class="flex items-start gap-3">
+        {options.variant === "success" && <CircleCheck class="h-5 w-5 text-emerald-500 shrink-0 mt-0.5" />}
+        {options.variant === "destructive" && <CircleAlert class="h-5 w-5 text-red-500 shrink-0 mt-0.5" />}
+        {options.variant === "warning" && <TriangleAlert class="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />}
+        {options.variant === "info" && <Info class="h-5 w-5 text-sky-500 shrink-0 mt-0.5" />}
+        <div class="grid gap-1">
+          <ToastTitle>{options.title}</ToastTitle>
+          {options.description && <ToastDescription>{options.description}</ToastDescription>}
+        </div>
+      </div>
+      <ToastCloseButton />
+    </Toast>
+  ));
+};

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

@@ -0,0 +1,41 @@
+import { splitProps, type Component, type ComponentProps } from "solid-js";
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip";
+import { cn } from "@/lib/cn";
+
+export const Tooltip = KobalteTooltip;
+
+export const TooltipTrigger = KobalteTooltip.Trigger;
+
+export const TooltipArrow: Component<ComponentProps<typeof KobalteTooltip.Arrow>> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <KobalteTooltip.Arrow
+      size={8}
+      class={cn("fill-popover stroke-border", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TooltipContentProps extends ComponentProps<typeof KobalteTooltip.Content> {
+  class?: string;
+}
+
+export const TooltipContent: Component<TooltipContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <KobalteTooltip.Portal>
+      <KobalteTooltip.Content
+        class={cn(
+          "z-50 rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md transition-all animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-[closed]:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobalteTooltip.Content>
+    </KobalteTooltip.Portal>
+  );
+};