@nikala-ui/core 0.6.0

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

@@ -0,0 +1,212 @@
+import {
+  createContext,
+  useContext,
+  createSignal,
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+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 [internalValue, setInternalValue] = createSignal(local.defaultValue);
+
+  const currentValue = () =>
+    local.value !== undefined ? local.value : internalValue();
+
+  const orientation = () => local.orientation || "horizontal";
+
+  const handleSelect = (val: string) => {
+    if (local.value === undefined) {
+      setInternalValue(val);
+    }
+    if (typeof local.onChange === "function") {
+      local.onChange(val);
+    }
+  };
+
+  const contextValue: TabsContextValue = {
+    value: currentValue,
+    setValue: handleSelect,
+    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,195 @@
+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";
+
+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 mode = () => local.mode || "mini";
+  const effect = () => local.effect || "none";
+
+  /* Reactive accessor determining whether dark mode is active */
+  const isDarkMode = () => {
+    const currentTheme = theme();
+    if (currentTheme === "dark") return true;
+    if (currentTheme === "light") return false;
+    return (
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+  };
+
+  const changeThemeWithEffect = (newTheme: Theme, e: MouseEvent) => {
+    runThemeTransition(effect(), e, () => {
+      setTheme(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/index.ts

@@ -0,0 +1,50 @@
+// src/registry/index.ts
+
+/**
+ * Represents a single file within a component registry item.
+ */
+export interface RegistryFile {
+  /** The target relative path where the file will be placed in the user's project (e.g., "ui/button.tsx") */
+  path: string;
+  /** The full raw text content of the file */
+  content: string;
+  /** The category type of the file */
+  type: "registry:ui" | "registry:util" | "registry:hook";
+}
+
+/**
+ * Represents the complete manifest structure for a single Nikala UI component.
+ */
+export interface RegistryItem {
+  /** The unique identifier name of the component (e.g., "button") */
+  name: string;
+  /** Display title for CLI prompts and documentation */
+  title: string;
+  /** Short summary describing the component */
+  description: string;
+  /** Component category type */
+  type: "registry:ui";
+  /** Required NPM dependencies to be installed automatically (e.g., ["clsx", "tailwind-merge"]) */
+  dependencies?: string[];
+  /** Internal Nikala UI component dependencies required by this component (e.g., ["button"]) */
+  registryDependencies?: string[];
+  /** Array of code files comprising this component */
+  files: RegistryFile[];
+}
+
+/**
+ * Lightweight metadata structure used for the central registry index list.
+ */
+export interface RegistryIndexItem {
+  name: string;
+  title: string;
+  description: string;
+  type: "registry:ui";
+  dependencies?: string[];
+  registryDependencies?: string[];
+}
+
+/**
+ * Type alias for the central registry index manifest.
+ */
+export type RegistryIndex = RegistryIndexItem[];

package/src/registry/metadata.ts

@@ -0,0 +1,152 @@
+export interface ComponentMeta {
+  title: string;
+  description: string;
+  dependencies?: string[];
+  registryDependencies?: string[];
+}
+
+/**
+ * Static metadata configuration for all registered Nikala UI components.
+ * Extend this record when adding new TSX components.
+ */
+export const COMPONENT_METADATA: Record<string, ComponentMeta> = {
+  button: {
+    title: "Button",
+    description: "An interactive button component with variant and size options.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  input: {
+    title: "Input",
+    description: "A standard text input field with styling variants.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  card: {
+    title: "Card",
+    description: "A versatile container component with header, content, and footer sections.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  badge: {
+    title: "Badge",
+    description: "A small badge component for status indicators and tags.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  avatar: {
+    title: "Avatar",
+    description: "An image element with fallback representation for representing users.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  separator: {
+    title: "Separator",
+    description: "Visually or semantically separates content horizontally or vertically.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  textarea: {
+    title: "Textarea",
+    description: "A multi-line text input field with responsive focus styles.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  label: {
+    title: "Label",
+    description: "Accessible caption label for form controls and inputs.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  skeleton: {
+    title: "Skeleton",
+    description: "Renders an animated pulse loading placeholder for content loading states.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  switch: {
+    title: "Switch",
+    description: "A control that allows the user to toggle between checked and unchecked states.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  checkbox: {
+    title: "Checkbox",
+    description: "A control that allows the user to toggle between checked and unchecked options.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  "radio-group": {
+    title: "Radio Group",
+    description: "A set of checkable buttons built on Kobalte primitives where only one button can be checked at a time.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  select: {
+    title: "Select",
+    description: "Displays a list of options for the user to pick from, built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  tabs: {
+    title: "Tabs",
+    description: "A set of layered sections of content displayed one at a time.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  accordion: {
+    title: "Accordion",
+    description: "A vertically stacked set of interactive headings built on Kobalte primitives.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  breadcrumb: {
+    title: "Breadcrumb",
+    description: "Displays the path to the current resource using a hierarchy of links.",
+    dependencies: ["clsx", "tailwind-merge"],
+  },
+  alert: {
+    title: "Alert",
+    description: "Displays a callout banner for user feedback with variants, dismiss button, and timer.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  dialog: {
+    title: "Dialog",
+    description: "A modal window overlaying the main content, built on Kobalte primitives with blur and outside-click options.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  sheet: {
+    title: "Sheet / Drawer",
+    description: "Extends the dialog component to display content that slides in from screen edges.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "@kobalte/core"],
+  },
+  "dropdown-menu": {
+    title: "Dropdown Menu",
+    description: "Displays a menu to the user—such as a set of actions or functions—triggered by a button or avatar.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core"],
+  },
+  "theme-manager": {
+    title: "Theme Manager",
+    description: "Zero-dependency ThemeProvider and ThemeToggle component for switching light, dark, and system themes.",
+    dependencies: ["clsx", "tailwind-merge", "@kobalte/core", "lucide-solid"],
+    registryDependencies: ["button", "dropdown-menu"],
+  },
+  banner: {
+    title: "Banner",
+    description: "An announcement banner with sticky positioning, dismissal persistence, auto-hide timer, Lucide icons, and variant styles.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid"],
+  },
+  list: {
+    title: "List / List Item",
+    description: "Compound list components supporting icons, avatars, titles, subtitles, hotkey badges, chevron indicators, and interactive links.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority", "lucide-solid", "@kobalte/core"],
+  },
+  kbd: {
+    title: "Kbd (Keyboard Key)",
+    description: "Keyboard key and shortcut group indicators for displaying hotkeys.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+  },
+  "input-group": {
+    title: "Input Group",
+    description: "Compound input wrapper for combining text inputs with prefix and suffix addons.",
+    dependencies: ["clsx", "tailwind-merge", "class-variance-authority"],
+    registryDependencies: ["kbd"],
+  },
+  command: {
+    title: "Command / Command Palette",
+    description: "Fast, accessible command palette and search modal built on Kobalte Dialog primitives with auto-filtering.",
+    dependencies: [
+      "clsx",
+      "tailwind-merge",
+      "class-variance-authority",
+      "lucide-solid",
+      "@kobalte/core",
+    ],
+    registryDependencies: ["kbd", "input-group", "list"],
+  },
+};