@nikala-ui/core 0.6.0

package/src/registry/components/ui/dropdown-menu.tsx

@@ -0,0 +1,250 @@
+import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
+import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { cn } from "@/lib/cn";
+
+export type DropdownMenuRootProps = Omit<
+  DropdownMenuPrimitive.DropdownMenuRootProps,
+  "placement"
+> & {
+  placement?:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+};
+
+export const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {
+  return <DropdownMenuPrimitive.Root {...props} />;
+};
+
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export type DropdownMenuSubTriggerProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuSubTriggerProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+    inset?: boolean;
+  };
+
+export const DropdownMenuSubTrigger = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuSubTriggerProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSubTriggerProps, ["class", "children", "inset"]);
+
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      class={cn(
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent text-foreground",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+      <svg class="ml-auto h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+};
+
+export type DropdownMenuSubContentProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuSubContentProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuSubContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuSubContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSubContentProps, ["class"]);
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        class={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+          local.class
+        )}
+        {...(rest as any)}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+export type DropdownMenuContentProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuContentProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuContentProps, ["class"]);
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        class={cn(
+          "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+          local.class
+        )}
+        {...(rest as any)}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+export type DropdownMenuItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuItemProps<T> & {
+    class?: string;
+    inset?: boolean;
+    variant?: "default" | "destructive";
+  };
+
+export const DropdownMenuItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuItemProps, [
+    "class",
+    "inset",
+    "variant",
+  ]);
+
+  return (
+    <DropdownMenuPrimitive.Item
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.inset && "pl-8",
+        local.variant === "destructive" &&
+        "text-destructive focus:bg-destructive/15 focus:text-destructive",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
+
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+          </svg>
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+};
+
+export type DropdownMenuRadioItemProps<T extends ValidComponent = "div"> =
+  DropdownMenuPrimitive.DropdownMenuRadioItemProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DropdownMenuRadioItemProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuRadioItemProps, ["class", "children"]);
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      class={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <span class="h-2 w-2 rounded-full bg-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {local.children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+};
+
+export interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  inset?: boolean;
+}
+
+export const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "inset"]);
+
+  return (
+    <div
+      class={cn(
+        "px-2 py-1.5 text-sm font-semibold text-foreground",
+        local.inset && "pl-8",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export type DropdownMenuSeparatorProps<T extends ValidComponent = "hr"> =
+  DropdownMenuPrimitive.DropdownMenuSeparatorProps<T> & {
+    class?: string;
+  };
+
+export const DropdownMenuSeparator = <T extends ValidComponent = "hr">(
+  props: PolymorphicProps<T, DropdownMenuSeparatorProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DropdownMenuSeparatorProps, ["class"]);
+
+  return (
+    <DropdownMenuPrimitive.Separator
+      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+export const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <span
+      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};

package/src/registry/components/ui/input-group.tsx

@@ -0,0 +1,80 @@
+// src/components/ui/input-group.tsx
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- Main InputGroup Wrapper --- */
+export interface InputGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const InputGroup: Component<InputGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "relative flex w-full items-center rounded-md border border-input bg-background text-sm shadow-2xs transition-colors focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- InputGroup Addon (Prefix / Suffix) --- */
+export const addonVariants = cva(
+  "flex items-center shrink-0 text-muted-foreground select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 pr-1",
+        "inline-end": "order-last pr-3 pl-1 gap-1",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+);
+
+export interface InputGroupAddonProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof addonVariants> {
+  class?: string;
+}
+
+export const InputGroupAddon: Component<InputGroupAddonProps> = (props) => {
+  const [local, rest] = splitProps(props, ["align", "class", "children"]);
+
+  return (
+    <div
+      class={cn(addonVariants({ align: local.align }), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- InputGroup Native Input --- */
+export interface InputGroupInputProps
+  extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  class?: string;
+}
+
+export const InputGroupInput: Component<InputGroupInputProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <input
+      class={cn(
+        "flex h-9 w-full flex-1 border-0 bg-transparent px-2.5 py-1 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,28 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+/**
+ * Props interface for the Input component extending standard HTML input attributes.
+ */
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Input component built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Input: Component<InputProps> = (props) => {
+  // Use splitProps to preserve SolidJS reactivity for destructured props
+  const [local, rest] = splitProps(props, ["class", "type"]);
+
+  return (
+    <input
+      type={local.type || "text"}
+      class={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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}
+    />
+  );
+};

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

@@ -0,0 +1,73 @@
+// src/components/ui/kbd.tsx
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const kbdVariants = cva(
+  "pointer-events-none inline-flex select-none items-center justify-center gap-1 rounded border border-border bg-muted font-mono font-medium text-muted-foreground shadow-2xs transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-muted text-muted-foreground",
+        outline: "border-border bg-transparent text-foreground",
+      },
+      size: {
+        sm: "h-4 min-w-[16px] px-1 text-[9px]",
+        md: "h-5 min-w-[20px] px-1.5 text-[10px]",
+        lg: "h-6 min-w-[24px] px-2 text-xs",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+    },
+  }
+);
+
+export interface KbdProps
+  extends JSX.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof kbdVariants> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Kbd (Keyboard Key) Component.
+ */
+export const Kbd: Component<KbdProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  return (
+    <kbd
+      class={cn(
+        kbdVariants({ variant: local.variant, size: local.size }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </kbd>
+  );
+};
+
+/* --- Kbd Group Container --- */
+export interface KbdGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const KbdGroup: Component<KbdGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("inline-flex items-center gap-1", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-foreground select-none"
+);
+
+export interface LabelProps
+  extends JSX.LabelHTMLAttributes<HTMLLabelElement>,
+  VariantProps<typeof labelVariants> {
+  class?: string;
+}
+
+/**
+ * Nikala UI Label component for form controls built for SolidJS with Tailwind CSS v4 styling.
+ */
+export const Label: Component<LabelProps> = (props) => {
+  /* Use splitProps to preserve SolidJS signal reactivity */
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <label
+      class={cn(labelVariants(), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </label>
+  );
+};

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

@@ -0,0 +1,222 @@
+// src/components/ui/list.tsx
+import {
+  splitProps,
+  Show,
+  type Component,
+  type JSX,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronRight } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+/* --- List Container --- */
+export interface ListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const List: Component<ListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div role="list" class={cn("flex flex-col gap-1 w-full p-1", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+/* --- List Group Container --- */
+export interface ListGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const ListGroup: Component<ListGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <div class={cn("flex flex-col gap-1 w-full my-1", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+/* --- List Group Header --- */
+export interface ListHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  class?: string;
+}
+
+export const ListHeader: Component<ListHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["title", "class"]);
+  return (
+    <div
+      class={cn(
+        "px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground select-none",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.title}
+    </div>
+  );
+};
+
+/* --- List Item Variants --- */
+export const listItemVariants = cva(
+  "group relative flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors outline-none cursor-pointer select-none disabled:pointer-events-none disabled:opacity-50 transform duration-150 ease-in-out",
+  {
+    variants: {
+      hoverVariant: {
+        default:
+          "hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+        accent:
+          "hover:bg-accent/80 hover:text-accent-foreground data-highlighted:bg-accent/80",
+        primary:
+          "hover:bg-primary/10 hover:text-primary data-highlighted:bg-primary/10 data-highlighted:text-primary",
+        muted:
+          "hover:bg-muted hover:text-foreground data-highlighted:bg-muted",
+      },
+      size: {
+        sm: "px-2.5 py-1.5 text-xs",
+        md: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base",
+      },
+      active: {
+        true: "bg-accent text-accent-foreground font-semibold",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      hoverVariant: "default",
+      size: "md",
+      active: false,
+    },
+  }
+);
+
+export interface ListItemProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof listItemVariants> {
+  title?: string;
+  subtitle?: string;
+  avatar?: string;
+  avatarFallback?: string;
+  icon?: Component<{ class?: string }>;
+  shortcut?: string;
+  showChevron?: boolean;
+  href?: string;
+  disabled?: boolean;
+  active?: boolean;
+  class?: string;
+}
+
+/**
+ * Nikala UI ListItem Component.
+ */
+export const ListItem: Component<ListItemProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "title",
+    "subtitle",
+    "avatar",
+    "avatarFallback",
+    "icon",
+    "shortcut",
+    "showChevron",
+    "href",
+    "disabled",
+    "active",
+    "hoverVariant",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  const content = () => (
+    <>
+      {/* Left Visual: Icon, Avatar, or Image */}
+      <div class="flex items-center gap-2.5 min-w-0">
+        <Show when={local.avatar}>
+          <img
+            src={local.avatar}
+            alt={local.title || "Avatar"}
+            class="w-6 h-6 rounded-full object-cover shrink-0 border border-border"
+          />
+        </Show>
+
+        <Show when={!local.avatar && local.avatarFallback}>
+          <span class="w-6 h-6 rounded-full bg-primary/10 text-primary text-[10px] font-bold flex items-center justify-center shrink-0 uppercase">
+            {local.avatarFallback}
+          </span>
+        </Show>
+
+        <Show when={!local.avatar && !local.avatarFallback && local.icon}>
+          <span class="shrink-0 text-muted-foreground group-hover:text-foreground transition-colors">
+            <Dynamic component={local.icon} class="w-4 h-4" />
+          </span>
+        </Show>
+
+        {/* Main Text Content */}
+        <div class="flex flex-col min-w-0 text-left">
+          <Show when={local.title}>
+            <span class="truncate font-medium leading-none">
+              {local.title}
+            </span>
+          </Show>
+          <Show when={local.subtitle}>
+            <span class="truncate text-xs text-muted-foreground font-normal mt-1">
+              {local.subtitle}
+            </span>
+          </Show>
+          {local.children}
+        </div>
+      </div>
+
+      {/* Right Visual: Shortcut Badge & Trailing Chevron */}
+      <div class="flex items-center gap-2 shrink-0">
+        <Show when={local.shortcut}>
+          <kbd class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
+            {local.shortcut}
+          </kbd>
+        </Show>
+
+        <Show when={local.showChevron}>
+          <ChevronRight class="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
+        </Show>
+      </div>
+    </>
+  );
+
+  const itemClasses = () =>
+    cn(
+      listItemVariants({
+        hoverVariant: local.hoverVariant,
+        size: local.size,
+        active: local.active,
+      }),
+      local.class
+    );
+
+  return (
+    <Show
+      when={local.href}
+      fallback={
+        <div
+          role="listitem"
+          class={itemClasses()}
+          aria-disabled={local.disabled}
+          {...rest}
+        >
+          {content()}
+        </div>
+      }
+    >
+      <a
+        role="listitem"
+        href={local.href}
+        class={itemClasses()}
+        aria-disabled={local.disabled}
+        {...(rest as JSX.AnchorHTMLAttributes<HTMLAnchorElement>)}
+      >
+        {content()}
+      </a>
+    </Show>
+  );
+};