@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,203 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { createControllableSignal } from "@/hooks/create-controllable-signal";
+import { cn } from "@/lib/cn";
+
+export const toggleGroupItemVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-border bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3 min-w-9",
+        sm: "h-8 px-2 text-xs min-w-8",
+        lg: "h-10 px-3 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface ToggleGroupContextValue {
+  type: "single" | "multiple";
+  value: Accessor<any>;
+  onItemSelect: (itemValue: string) => void;
+  variant: Accessor<"default" | "outline">;
+  size: Accessor<"default" | "sm" | "lg">;
+  disabled: Accessor<boolean>;
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>();
+
+export interface ToggleGroupProps<T extends "single" | "multiple" = "single">
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof toggleGroupItemVariants> {
+  /** Mode of selection: single choice or multiple choices */
+  type?: T;
+  /** Controlled value: string for 'single', string[] for 'multiple' */
+  value?: T extends "multiple" ? string[] : string;
+  /** Uncontrolled default value */
+  defaultValue?: T extends "multiple" ? string[] : string;
+  /** Callback fired when selection changes */
+  onChange?: (value: T extends "multiple" ? string[] : string) => void;
+  /** Layout orientation */
+  orientation?: "horizontal" | "vertical";
+  /** Disables all buttons in the group */
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Root container for grouping connected toggle items with shared single/multiple selection state.
+ */
+export const ToggleGroup = <T extends "single" | "multiple" = "single">(
+  props: ToggleGroupProps<T>
+) => {
+  const [local, rest] = splitProps(props, [
+    "type",
+    "value",
+    "defaultValue",
+    "onChange",
+    "orientation",
+    "variant",
+    "size",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  const type = () => local.type ?? ("single" as T);
+  const variant = () => local.variant ?? "default";
+  const size = () => local.size ?? "default";
+  const disabled = () => local.disabled ?? false;
+  const orientation = () => local.orientation ?? "horizontal";
+
+  const [currentValue, setCurrentValue] = createControllableSignal<any>({
+    value: () => local.value,
+    defaultValue: local.defaultValue ?? (type() === "multiple" ? [] : undefined),
+    onChange: (val) => local.onChange?.(val),
+  });
+
+  const onItemSelect = (itemValue: string) => {
+    if (disabled()) return;
+
+    if (type() === "multiple") {
+      const currentList = Array.isArray(currentValue()) ? currentValue() : [];
+      if (currentList.includes(itemValue)) {
+        setCurrentValue(currentList.filter((v: string) => v !== itemValue));
+      } else {
+        setCurrentValue([...currentList, itemValue]);
+      }
+    } else {
+      const current = currentValue();
+      if (current === itemValue) {
+        setCurrentValue(undefined);
+      } else {
+        setCurrentValue(itemValue);
+      }
+    }
+  };
+
+  const contextValue: ToggleGroupContextValue = {
+    type: type(),
+    value: currentValue,
+    onItemSelect,
+    variant,
+    size,
+    disabled,
+  };
+
+  return (
+    <ToggleGroupContext.Provider value={contextValue}>
+      <div
+        role="group"
+        data-orientation={orientation()}
+        class={cn(
+          "flex items-center justify-center gap-1 rounded-lg",
+          orientation() === "vertical" ? "flex-col" : "flex-row",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ToggleGroupContext.Provider>
+  );
+};
+
+export interface ToggleGroupItemProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleGroupItemVariants> {
+  /** Unique value representing this toggle item within the group */
+  value: string;
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Individual toggle button item within a ToggleGroup.
+ */
+export const ToggleGroupItem: Component<ToggleGroupItemProps> = (props) => {
+  const context = useContext(ToggleGroupContext);
+
+  if (!context) {
+    throw new Error("ToggleGroupItem must be used within a ToggleGroup");
+  }
+
+  const [local, rest] = splitProps(props, [
+    "value",
+    "variant",
+    "size",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  const isSelected = () => {
+    const groupValue = context.value();
+    if (context.type === "multiple") {
+      return Array.isArray(groupValue) && groupValue.includes(local.value);
+    }
+    return groupValue === local.value;
+  };
+
+  const isDisabled = () => local.disabled || context.disabled();
+  const itemVariant = () => local.variant || context.variant();
+  const itemSize = () => local.size || context.size();
+
+  return (
+    <button
+      type="button"
+      role={context.type === "single" ? "radio" : "checkbox"}
+      aria-checked={isSelected()}
+      data-state={isSelected() ? "on" : "off"}
+      disabled={isDisabled()}
+      onClick={() => context.onItemSelect(local.value)}
+      class={cn(
+        toggleGroupItemVariants({
+          variant: itemVariant(),
+          size: itemSize(),
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  );
+};

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

@@ -0,0 +1,101 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { ToggleButton as KobalteToggle } from "@kobalte/core/toggle-button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[pressed]:bg-accent data-[pressed]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-3 min-w-9",
+        sm: "h-8 px-2 text-xs min-w-8",
+        lg: "h-10 px-3 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ToggleProps
+  extends JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof toggleVariants> {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const Toggle: Component<ToggleProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "pressed",
+    "defaultPressed",
+    "onPressedChange",
+    "disabled",
+    "onChange",
+  ]);
+
+  return (
+    <KobalteToggle
+      isPressed={local.pressed}
+      defaultIsPressed={local.defaultPressed}
+      onChange={local.onPressedChange}
+      disabled={local.disabled}
+      class={cn(
+        toggleVariants({ variant: local.variant, size: local.size }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </KobalteToggle>
+  );
+};
+
+export interface ToggleGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: any) => void;
+  disabled?: boolean;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ToggleGroup: Component<ToggleGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "type",
+    "value",
+    "defaultValue",
+    "onChange",
+    "disabled",
+    "class",
+    "children",
+  ]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-center gap-1 rounded-md border border-border/40 p-1 bg-background",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/dist/vendor/core-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>
+  );
+};

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

@@ -0,0 +1,254 @@
+import {
+  Show,
+  splitProps,
+  type Component,
+  type ParentComponent,
+  type JSX,
+} from "solid-js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import type {
+  CreateAppUpdaterReturn,
+  UpdateManifestInfo,
+  UpdateProgressInfo,
+} from "@/hooks/create-app-updater";
+import {
+  Download,
+  RotateCcw,
+  CheckCircle2,
+  AlertTriangle,
+  ArrowRight,
+  Package,
+} from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+function formatBytes(bytes: number): string {
+  if (!bytes || bytes === 0) return "0 MB";
+  const mb = bytes / (1024 * 1024);
+  return `${mb.toFixed(1)} MB`;
+}
+
+/* --- 1. Sub-components for Clean Modularity & Zero Repetition --- */
+
+export interface UpdaterHeaderProps {
+  appName: string;
+  status: string;
+  info?: UpdateManifestInfo | null;
+}
+
+export const UpdaterHeader: Component<UpdaterHeaderProps> = (props) => (
+  <DialogHeader class="space-y-1.5 text-left">
+    <div class="flex items-center justify-between">
+      <div class="size-8 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
+        <Package class="size-4" />
+      </div>
+      <Show when={props.info?.version}>
+        <div class="flex items-center gap-1.5 text-xs font-mono">
+          <span class="text-muted-foreground">{props.info?.currentVersion || "v1.0.0"}</span>
+          <ArrowRight class="size-3 text-muted-foreground" />
+          <Badge variant="default" class="text-xs px-1.5 py-0 bg-primary text-primary-foreground font-semibold">
+            {props.info?.version}
+          </Badge>
+        </div>
+      </Show>
+    </div>
+
+    <DialogTitle class="text-base font-bold tracking-tight text-foreground">
+      {props.status === "downloaded"
+        ? "Update Ready to Install"
+        : props.status === "downloading"
+        ? "Downloading Update..."
+        : props.status === "up-to-date"
+        ? "Up to Date"
+        : `New Update Available for ${props.appName}`}
+    </DialogTitle>
+
+    <DialogDescription class="text-xs text-muted-foreground leading-relaxed">
+      {props.status === "downloaded"
+        ? "The update has been downloaded and verified. Restart to apply changes."
+        : props.status === "downloading"
+        ? "Please wait while update packages are being downloaded."
+        : props.status === "up-to-date"
+        ? `${props.appName} is running on the latest version.`
+        : "A new version with features and bug fixes is ready to install."}
+    </DialogDescription>
+  </DialogHeader>
+);
+
+export interface UpdaterReleaseNotesProps {
+  body?: string;
+  date?: string;
+}
+
+export const UpdaterReleaseNotes: Component<UpdaterReleaseNotesProps> = (props) => (
+  <div class="space-y-1">
+    <div class="flex items-center justify-between text-xs text-muted-foreground font-medium">
+      <span>Release Notes</span>
+      <Show when={props.date}>
+        <span class="text-[11px] font-mono">{props.date}</span>
+      </Show>
+    </div>
+    <pre class="max-h-28 overflow-y-auto rounded-md border border-border bg-black/5 dark:bg-black/50 p-2.5 text-xs text-foreground font-mono whitespace-pre-wrap leading-relaxed select-text shadow-inner">
+      {props.body}
+    </pre>
+  </div>
+);
+
+export interface UpdaterProgressBarProps {
+  progress: UpdateProgressInfo;
+}
+
+export const UpdaterProgressBar: Component<UpdaterProgressBarProps> = (props) => (
+  <div class="space-y-1.5 py-1">
+    <div class="flex items-center justify-between text-xs font-mono">
+      <span class="text-muted-foreground font-sans">Progress</span>
+      <span class="font-semibold text-primary">{props.progress.percentage}%</span>
+    </div>
+    <Progress value={props.progress.percentage} class="h-1.5" />
+    <div class="flex items-center justify-between text-[11px] font-mono text-muted-foreground">
+      <span>{formatBytes(props.progress.downloaded)}</span>
+      <span>{formatBytes(props.progress.total)}</span>
+    </div>
+  </div>
+);
+
+/* --- 2. Main UpdaterModal Compound Component --- */
+
+export interface UpdaterModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  updater: CreateAppUpdaterReturn;
+  appName?: string;
+  class?: string;
+}
+
+export const UpdaterModal: Component<UpdaterModalProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "open",
+    "onOpenChange",
+    "updater",
+    "appName",
+    "class",
+  ]);
+
+  const appName = () => local.appName || "Nikala Desktop";
+  const status = () => local.updater.status();
+  const info = () => local.updater.updateInfo();
+  const progress = () => local.updater.progress();
+  const error = () => local.updater.error();
+
+  return (
+    <Dialog open={local.open} onOpenChange={local.onOpenChange}>
+      <DialogContent class={cn("sm:max-w-sm", local.class)}>
+        {/* Header */}
+        <UpdaterHeader
+          appName={appName()}
+          status={status()}
+          info={info()}
+        />
+
+        {/* Error Alert */}
+        <Show when={error()}>
+          <Alert variant="destructive" class="py-2 text-xs">
+            <AlertTriangle class="size-3.5" />
+            <AlertTitle class="font-semibold text-xs">Update Failed</AlertTitle>
+            <AlertDescription class="text-[11px]">{error()}</AlertDescription>
+          </Alert>
+        </Show>
+
+        {/* Release Notes */}
+        <Show when={info()?.body && (status() === "available" || status() === "downloading")}>
+          <UpdaterReleaseNotes body={info()?.body} date={info()?.date} />
+        </Show>
+
+        {/* Progress Bar */}
+        <Show when={status() === "downloading"}>
+          <UpdaterProgressBar progress={progress()} />
+        </Show>
+
+        {/* Success Callout */}
+        <Show when={status() === "downloaded"}>
+          <div class="flex items-center gap-2.5 p-2.5 rounded-md border border-primary/30 bg-primary/5 text-xs text-foreground">
+            <CheckCircle2 class="size-4 text-primary shrink-0" />
+            <p class="font-medium text-foreground text-xs">Package downloaded & verified.</p>
+          </div>
+        </Show>
+
+        {/* Actions Footer */}
+        <DialogFooter class="flex-row items-center justify-end gap-1.5 pt-1">
+          <Show when={status() === "available" || status() === "error"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Later
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => local.updater.downloadAndInstall()}
+              class="text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-medium"
+            >
+              <Download class="size-3.5" />
+              <span>Update Now</span>
+            </Button>
+          </Show>
+
+          <Show when={status() === "downloading"}>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled
+              class="text-xs h-7.5 w-full opacity-70 justify-center"
+            >
+              Downloading ({progress().percentage}%)
+            </Button>
+          </Show>
+
+          <Show when={status() === "downloaded"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Later
+            </Button>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={() => local.updater.relaunch()}
+              class="text-xs h-7.5 px-3 gap-1.5 cursor-pointer font-semibold shadow-xs"
+            >
+              <RotateCcw class="size-3.5" />
+              <span>Relaunch</span>
+            </Button>
+          </Show>
+
+          <Show when={status() === "up-to-date" || status() === "idle"}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => local.onOpenChange(false)}
+              class="text-xs h-7.5 px-3 cursor-pointer"
+            >
+              Close
+            </Button>
+          </Show>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/dist/vendor/core-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" | "registry:block";
+}
+
+/**
+ * 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" | "registry:util" | "registry:hook" | "registry:block";
+  /** 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" | "registry:util" | "registry:hook" | "registry:block";
+  dependencies?: string[];
+  registryDependencies?: string[];
+}
+
+/**
+ * Type alias for the central registry index manifest.
+ */
+export type RegistryIndex = RegistryIndexItem[];