@nikala-ui/docs 0.12.0

package/dist/vendor/core-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 "@/hooks/create-controllable-signal";
+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-accent data-[state=active]:border data-[state=active]:border-border 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/dist/vendor/core-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-20 w-full rounded-md border border-input bg-muted 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/dist/vendor/core-src/registry/components/ui/theme-toggle.tsx

@@ -0,0 +1,238 @@
+import { splitProps, type Component, For, Show, type JSX } 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, type ButtonProps } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "./dropdown-menu";
+import { cn } from "@/lib/cn";
+
+export interface ThemeToggleProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+  /** Display mode: "button" (direct 1-click toggle), "mini" (compact dropdown), "max" (full customizer panel). Defaults to "mini". */
+  mode?: "button" | "mini" | "max";
+  /** Transition animation effect when changing themes ("none", "circular", "fade") */
+  effect?: ThemeEffect;
+  /** Button visual style variant when rendered as a button or dropdown trigger */
+  variant?: ButtonProps["variant"];
+  /** Button size */
+  size?: ButtonProps["size"];
+  class?: string;
+}
+
+const ACCENT_OPTIONS: { name: AccentColor; label: string; color: string }[] = [
+  { name: "yellow", label: "Yellow", color: "bg-yellow-500" },
+  { name: "red", label: "Red", color: "bg-red-500" },
+  { name: "violet", label: "Violet", color: "bg-violet-500" },
+  { name: "sky", label: "Sky", color: "bg-sky-500" },
+  { name: "emerald", label: "Emerald", color: "bg-emerald-500" },
+  { name: "zinc", label: "Zinc", color: "bg-zinc-800 dark:bg-zinc-200" },
+];
+
+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 button, mini (dropdown), and max (customizer panel) modes with View Transition animations.
+ */
+export const ThemeToggle: Component<ThemeToggleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["mode", "effect", "variant", "size", "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;
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  };
+
+  const changeThemeWithEffect = (newTheme: Theme, e: MouseEvent) => {
+    runThemeTransition(effect(), e, () => {
+      setTheme(newTheme);
+    });
+  };
+
+  const handleToggleClick = (e: MouseEvent) => {
+    const nextTheme: Theme = isDarkMode() ? "light" : "dark";
+    changeThemeWithEffect(nextTheme, e);
+  };
+
+  return (
+    <Show
+      when={mode() !== "button"}
+      fallback={
+        /* Button Mode: Direct 1-click Dark/Light switcher without dropdown */
+        <Button
+          variant={local.variant || "ghost"}
+          size={local.size || "icon"}
+          onClick={handleToggleClick}
+          class={cn("relative cursor-pointer", local.class)}
+          aria-label="Toggle theme"
+          {...rest}
+        >
+          <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>
+        </Button>
+      }
+    >
+      <DropdownMenu placement="bottom-end">
+        <DropdownMenuTrigger
+          as={Button}
+          variant={local.variant || "ghost"}
+          size={local.size || "icon"}
+          class={cn("relative cursor-pointer", local.class)}
+          {...rest}
+        >
+          {/* 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">
+            <div class="p-2 space-y-2">
+              <DropdownMenuGroup>
+                <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>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator class="my-2" />
+
+              <DropdownMenuGroup>
+                <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>
+              </DropdownMenuGroup>
+
+              <DropdownMenuSeparator class="my-2" />
+
+              <DropdownMenuGroup>
+                <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>
+              </DropdownMenuGroup>
+            </div>
+          </DropdownMenuContent>
+        </Show>
+      </DropdownMenu>
+    </Show>
+  );
+};