@nikala-ui/core 0.6.0

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

@@ -0,0 +1,286 @@
+import {
+  createContext,
+  useContext,
+  createSignal,
+  onMount,
+  onCleanup,
+  Show,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { Dialog } from "@kobalte/core/dialog";
+import { Search, ArrowUp, ArrowDown, CornerDownLeft } from "lucide-solid";
+import { cn } from "@/lib/cn";
+import { Kbd, KbdGroup } from "../ui/kbd";
+import { InputGroup, InputGroupInput, InputGroupAddon } from "../ui/input-group";
+import { List, ListGroup, ListHeader, ListItem, type ListItemProps } from "../ui/list";
+
+/* --- Command Context State --- */
+interface CommandContextValue {
+  search: Accessor<string>;
+  setSearch: (value: string) => void;
+}
+
+const CommandContext = createContext<CommandContextValue>();
+
+export const useCommand = () => {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error("useCommand must be used within a <Command />");
+  }
+  return ctx;
+};
+
+/* --- Root Command Container --- */
+export interface CommandProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const Command: Component<CommandProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const [search, setSearch] = createSignal("");
+
+  return (
+    <CommandContext.Provider value={{ search, setSearch }}>
+      <div
+        class={cn(
+          "flex flex-col w-full h-full rounded-xl bg-popover text-popover-foreground overflow-hidden border border-border shadow-md",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </CommandContext.Provider>
+  );
+};
+
+/* --- Command Dialog (Modal) --- */
+export interface CommandDialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  enableHotkey?: boolean;
+  children?: JSX.Element;
+  class?: string;
+}
+
+export const CommandDialog: Component<CommandDialogProps> = (props) => {
+  const [internalOpen, setInternalOpen] = createSignal(false);
+
+  const isOpen = () => (props.open !== undefined ? props.open : internalOpen());
+  const setOpen = (val: boolean) => {
+    if (props.open === undefined) setInternalOpen(val);
+    if (typeof props.onOpenChange === "function") props.onOpenChange(val);
+  };
+
+  /* Listen for global Ctrl+K / Cmd+K hotkeys */
+  onMount(() => {
+    if (props.enableHotkey !== false) {
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+          e.preventDefault();
+          setOpen(!isOpen());
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
+    }
+  });
+
+  return (
+    <Dialog open={isOpen()} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0" />
+        <div class="fixed inset-0 z-50 flex items-start justify-center pt-16 sm:pt-24 px-4">
+          <Dialog.Content class="w-full max-w-xl rounded-xl border border-border bg-popover text-popover-foreground shadow-2xl outline-none data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95">
+            <Command class={props.class}>{props.children}</Command>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  );
+};
+
+/* --- Command Input --- */
+export interface CommandInputProps
+  extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  class?: string;
+}
+
+export const CommandInput: Component<CommandInputProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "value", "onInput"]);
+  const { search, setSearch } = useCommand();
+
+  return (
+    <InputGroup class="border-0 border-b border-border rounded-none bg-transparent px-3 py-1 shadow-none focus-within:ring-0 focus-within:border-border">
+      <InputGroupAddon align="inline-start">
+        <Search class="w-4 h-4 text-muted-foreground" />
+      </InputGroupAddon>
+
+      <InputGroupInput
+        value={search()}
+        onInput={(e) => {
+          setSearch(e.currentTarget.value);
+          if (typeof local.onInput === "function") {
+            local.onInput(e);
+          }
+        }}
+        placeholder="Type a command or search..."
+        class="h-11 text-base sm:text-sm font-medium"
+        {...rest}
+      />
+    </InputGroup>
+  );
+};
+
+/* --- Command List Container --- */
+export interface CommandListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const CommandList: Component<CommandListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("max-h-[330px] overflow-y-auto p-1.5 scrollbar-thin", local.class)}
+      {...rest}
+    >
+      <List>{local.children}</List>
+    </div>
+  );
+};
+
+/* --- Command Empty Block --- */
+export interface CommandEmptyProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const CommandEmpty: Component<CommandEmptyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const { search } = useCommand();
+
+  return (
+    <Show when={search().trim().length > 0}>
+      <div
+        class={cn(
+          "py-8 text-center text-sm text-muted-foreground font-medium select-none",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children || `No results found for "${search()}".`}
+      </div>
+    </Show>
+  );
+};
+
+/* --- Command Group --- */
+export interface CommandGroupProps {
+  heading: string;
+  children?: JSX.Element;
+  class?: string;
+}
+
+export const CommandGroup: Component<CommandGroupProps> = (props) => {
+  return (
+    <ListGroup class={props.class}>
+      <ListHeader title={props.heading} />
+      {props.children}
+    </ListGroup>
+  );
+};
+
+/* --- Command Item --- */
+export interface CommandItemProps extends ListItemProps {
+  keywords?: string[];
+  onSelect?: () => void;
+}
+
+export const CommandItem: Component<CommandItemProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "title",
+    "subtitle",
+    "keywords",
+    "onSelect",
+    "onClick",
+    "class",
+  ]);
+  const { search } = useCommand();
+
+  /* Auto fuzzy-filter item based on search query */
+  const matchesSearch = () => {
+    const query = search().toLowerCase().trim();
+    if (!query) return true;
+
+    const titleMatch = local.title?.toLowerCase().includes(query);
+    const subtitleMatch = local.subtitle?.toLowerCase().includes(query);
+    const keywordMatch = local.keywords?.some((k) =>
+      k.toLowerCase().includes(query)
+    );
+
+    return Boolean(titleMatch || subtitleMatch || keywordMatch);
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (typeof local.onSelect === "function") {
+      local.onSelect();
+    }
+    if (typeof local.onClick === "function") {
+      local.onClick(e as any);
+    }
+  };
+
+  return (
+    <Show when={matchesSearch()}>
+      <ListItem
+        title={local.title}
+        subtitle={local.subtitle}
+        onClick={handleClick}
+        class={local.class}
+        {...rest}
+      />
+    </Show>
+  );
+};
+
+/* --- Command Footer --- */
+export interface CommandFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const CommandFooter: Component<CommandFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between border-t border-border bg-muted/30 px-3 py-2 text-xs text-muted-foreground select-none",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex items-center gap-3">
+        <span class="flex items-center gap-1">
+          <KbdGroup>
+            <Kbd size="sm"><ArrowUp class="w-2.5 h-2.5" /></Kbd>
+            <Kbd size="sm"><ArrowDown class="w-2.5 h-2.5" /></Kbd>
+          </KbdGroup>
+          <span>Navigate</span>
+        </span>
+
+        <span class="flex items-center gap-1">
+          <Kbd size="sm"><CornerDownLeft class="w-2.5 h-2.5" /></Kbd>
+          <span>Select</span>
+        </span>
+      </div>
+
+      <span class="flex items-center gap-1">
+        <Kbd size="sm">Esc</Kbd>
+        <span>Close</span>
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,195 @@
+import { splitProps, type Component, type JSX, type ValidComponent, Show } from "solid-js";
+import * as DialogPrimitive from "@kobalte/core/dialog";
+import type { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { cn } from "@/lib/cn";
+
+export type DialogRootProps = DialogPrimitive.DialogRootProps;
+
+/**
+ * Root Dialog component managing modal open state.
+ */
+export const Dialog: Component<DialogRootProps> = (props) => {
+  return <DialogPrimitive.Root {...props} />;
+};
+
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+export type DialogOverlayProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogOverlayProps<T> & {
+    /** Whether to apply background blur effect (default: true) */
+    blur?: boolean;
+    class?: string;
+  };
+
+/**
+ * Backdrop overlay wrapper with optional backdrop blur styling.
+ */
+export const DialogOverlay = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogOverlayProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogOverlayProps, ["class", "blur"]);
+
+  return (
+    <DialogPrimitive.Overlay
+      class={cn(
+        "fixed inset-0 z-50 bg-black/80 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
+        local.blur !== false && "backdrop-blur-sm",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DialogContentProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogContentProps<T> & {
+    /** Whether to show the top-right close (X) button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether clicking outside closes the dialog (default: true) */
+    closeOnOutsideClick?: boolean;
+    /** Whether to apply background backdrop blur (default: true) */
+    blur?: boolean;
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Main dialog popup window housing header, content, and footer.
+ */
+export const DialogContent = <T extends ValidComponent = "div">(
+  props: PolymorphicProps<T, DialogContentProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogContentProps, [
+    "class",
+    "children",
+    "showCloseButton",
+    "closeOnOutsideClick",
+    "blur",
+    "onPointerDownOutside",
+    "onInteractOutside",
+  ]);
+
+  const handlePointerDownOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onPointerDownOutside === "function") {
+      local.onPointerDownOutside(e as any);
+    }
+  };
+
+  const handleInteractOutside = (e: Event) => {
+    if (local.closeOnOutsideClick === false) {
+      e.preventDefault();
+    }
+    if (typeof local.onInteractOutside === "function") {
+      local.onInteractOutside(e as any);
+    }
+  };
+
+  return (
+    <DialogPrimitive.Portal>
+      {/* Forward blur prop to DialogOverlay */}
+      <DialogOverlay blur={local.blur} />
+      <DialogPrimitive.Content
+        onPointerDownOutside={handlePointerDownOutside}
+        onInteractOutside={handleInteractOutside}
+        class={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg duration-200 data-[expanded]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0 data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95 data-[closed]:slide-out-to-left-1/2 data-[closed]:slide-out-to-top-[48%] data-[expanded]:slide-in-from-left-1/2 data-[expanded]:slide-in-from-top-[48%] sm:rounded-lg text-card-foreground",
+          local.class
+        )}
+        {...(rest as any)}
+      >
+        {local.children}
+        <Show when={local.showCloseButton !== false}>
+          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[expanded]:bg-accent data-[expanded]:text-muted-foreground cursor-pointer">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+            <span class="sr-only">Close</span>
+          </DialogPrimitive.CloseButton>
+        </Show>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  );
+};
+
+export interface DialogHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Dialog top header container.
+ */
+export const DialogHeader: Component<DialogHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col space-y-1.5 text-center sm:text-left", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DialogFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Dialog bottom action buttons area.
+ */
+export const DialogFooter: Component<DialogFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export type DialogTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Dialog title heading.
+ */
+export const DialogTitle = <T extends ValidComponent = "h2">(
+  props: PolymorphicProps<T, DialogTitleProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogTitleProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Title
+      class={cn("text-lg font-semibold leading-none tracking-tight text-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type DialogDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Dialog subtitle or description text.
+ */
+export const DialogDescription = <T extends ValidComponent = "p">(
+  props: PolymorphicProps<T, DialogDescriptionProps<T>>
+) => {
+  const [local, rest] = splitProps(props as DialogDescriptionProps, ["class"]);
+
+  return (
+    <DialogPrimitive.Description
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export const DialogClose = DialogPrimitive.CloseButton;