@nikala-ui/core 0.10.1 → 0.11.0-nightly.b01fa01

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

@@ -1,30 +1,29 @@
 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 { ScrollArea } from "./scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
 export type DialogRootProps = DialogPrimitive.DialogRootProps;
 
 /**
- * Root Dialog container managing state and context.
+ * Root Dialog component managing modal open state.
  */
 export const Dialog: Component<DialogRootProps> = (props) => {
   return <DialogPrimitive.Root {...props} />;
 };
 
 export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogClose = DialogPrimitive.CloseButton;
 
 export type DialogOverlayProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogOverlayProps<T> & {
-    /** Whether to apply background backdrop blur (default: true) */
+    /** Whether to apply background blur effect (default: true) */
     blur?: boolean;
     class?: string;
   };
 
 /**
- * Darkened background overlay behind open dialog.
+ * Backdrop overlay wrapper with optional backdrop blur styling.
  */
 export const DialogOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DialogOverlayProps<T>>
@@ -34,8 +33,8 @@ export const DialogOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "fixed inset-0 z-50 transition-all duration-200 data-expanded:animate-in data-closed:animate-out data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
-        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-black/80",
+        "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)}
@@ -124,6 +123,9 @@ 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"]);
 
@@ -139,52 +141,60 @@ 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 pt-4",
-        local.class
-      )}
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
       {...rest}
     />
   );
 };
 
-export interface DialogTitleProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type DialogTitleProps<T extends ValidComponent = "h2"> =
+  DialogPrimitive.DialogTitleProps<T> & {
+    class?: string;
+  };
 
-export const DialogTitle: Component<DialogTitleProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+/**
+ * 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}
-    >
-      {local.children}
-    </DialogPrimitive.Title>
+      {...(rest as any)}
+    />
   );
 };
 
-export interface DialogDescriptionProps {
-  class?: string;
-  children?: JSX.Element;
-}
+export type DialogDescriptionProps<T extends ValidComponent = "p"> =
+  DialogPrimitive.DialogDescriptionProps<T> & {
+    class?: string;
+  };
 
-export const DialogDescription: Component<DialogDescriptionProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+/**
+ * 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}
-    >
-      {local.children}
-    </DialogPrimitive.Description>
+      {...(rest as any)}
+    />
   );
-};
+};
+
+export const DialogClose = DialogPrimitive.CloseButton;

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

@@ -1,10 +1,12 @@
-import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
+import { splitProps, type Component, type JSX, type ValidComponent, createContext, useContext } from "solid-js";
 import * as DropdownMenuPrimitive from "@kobalte/core/dropdown-menu";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
-import { createClickOutside } from "@nikala-ui/hooks";
-import { ScrollArea } from "./scroll-area";
+import { createClickOutside } from "@/hooks/create-click-outside";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/cn";
 
+const DropdownGroupContext = createContext<boolean>(false);
+
 export type DropdownMenuRootProps = Omit<
   DropdownMenuPrimitive.DropdownMenuRootProps,
   "placement"
@@ -29,7 +31,15 @@ export const DropdownMenu: Component<DropdownMenuRootProps> = (props) => {
 };
 
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+export const DropdownMenuGroup: Component<DropdownMenuPrimitive.DropdownMenuGroupProps> = (props) => {
+  return (
+    <DropdownGroupContext.Provider value={true}>
+      <DropdownMenuPrimitive.Group {...props} />
+    </DropdownGroupContext.Provider>
+  );
+};
+
 export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
@@ -120,7 +130,7 @@ export const DropdownMenuContent = <T extends ValidComponent = "div">(
           local.class
         )}
       >
-        <ScrollArea class="max-h-72 w-full rounded-[inherit]">
+        <ScrollArea class="max-h-72 w-full">
           <div class="p-1">
             {local.children}
           </div>
@@ -134,18 +144,25 @@ 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"]);
+  const [local, rest] = splitProps(props as DropdownMenuItemProps, [
+    "class",
+    "inset",
+    "variant",
+  ]);
 
   return (
     <DropdownMenuPrimitive.Item
       class={cn(
-        "relative flex cursor-default 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 text-foreground",
+        "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)}
@@ -157,26 +174,24 @@ export type DropdownMenuCheckboxItemProps<T extends ValidComponent = "div"> =
   DropdownMenuPrimitive.DropdownMenuCheckboxItemProps<T> & {
     class?: string;
     children?: JSX.Element;
-    checked?: boolean;
   };
 
 export const DropdownMenuCheckboxItem = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, DropdownMenuCheckboxItemProps<T>>
 ) => {
-  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children", "checked"]);
+  const [local, rest] = splitProps(props as DropdownMenuCheckboxItemProps, ["class", "children"]);
 
   return (
     <DropdownMenuPrimitive.CheckboxItem
-      checked={local.checked}
       class={cn(
-        "relative flex cursor-default 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 text-foreground",
+        "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" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <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>
@@ -200,16 +215,14 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   return (
     <DropdownMenuPrimitive.RadioItem
       class={cn(
-        "relative flex cursor-default 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 text-foreground",
+        "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-2 w-2 fill-current" viewBox="0 0 8 8">
-            <circle cx="4" cy="4" r="3" />
-          </svg>
+          <span class="h-2 w-2 rounded-lg bg-current" />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {local.children}
@@ -217,7 +230,9 @@ export const DropdownMenuRadioItem = <T extends ValidComponent = "div">(
   );
 };
 
-export interface DropdownMenuLabelProps {
+export const DropdownMenuGroupLabel = DropdownMenuPrimitive.GroupLabel;
+
+export interface DropdownMenuLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
   inset?: boolean;
   children?: JSX.Element;
@@ -225,36 +240,59 @@ export interface DropdownMenuLabelProps {
 
 export const DropdownMenuLabel: Component<DropdownMenuLabelProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "inset", "children"]);
+  const isInsideGroup = useContext(DropdownGroupContext);
+
+  const classes = () =>
+    cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      local.inset && "pl-8",
+      local.class
+    );
 
   return (
-    <DropdownMenuPrimitive.GroupLabel
-      class={cn("px-2 py-1.5 text-sm font-semibold text-foreground", local.inset && "pl-8", local.class)}
-      {...rest}
-    >
-      {local.children}
-    </DropdownMenuPrimitive.GroupLabel>
+    <>
+      {isInsideGroup ? (
+        <DropdownMenuPrimitive.GroupLabel class={classes()} {...(rest as any)}>
+          {local.children}
+        </DropdownMenuPrimitive.GroupLabel>
+      ) : (
+        <div class={classes()} {...rest}>
+          {local.children}
+        </div>
+      )}
+    </>
   );
 };
 
-export const DropdownMenuSeparator: Component<{ class?: string }> = (props) => {
+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", props.class)}
+      class={cn("-mx-1 my-1 h-px bg-border", local.class)}
+      {...(rest as any)}
     />
   );
 };
 
-export interface DropdownMenuShortcutProps {
+export interface DropdownMenuShortcutProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   class?: string;
-  children?: JSX.Element;
 }
 
 export const DropdownMenuShortcut: Component<DropdownMenuShortcutProps> = (props) => {
-  const [local, rest] = splitProps(props, ["class", "children"]);
+  const [local, rest] = splitProps(props, ["class"]);
 
   return (
-    <span class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)} {...rest}>
-      {local.children}
-    </span>
+    <span
+      class={cn("ml-auto text-xs tracking-widest text-muted-foreground", local.class)}
+      {...rest}
+    />
   );
 };

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

@@ -0,0 +1,189 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+import { CloudUpload, FileText, X, AlertCircle } from "lucide-solid";
+
+export interface DropzoneProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  isOver?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Root container for the Dropzone file upload component.
+ */
+export const Dropzone: Component<DropzoneProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "isOver", "disabled"]);
+
+  return (
+    <div
+      class={cn(
+        "group relative flex w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-card/50 p-8 text-center transition-all",
+        "hover:border-primary/50 hover:bg-card/80",
+        local.isOver && "border-primary bg-primary/5 ring-2 ring-primary/20",
+        local.disabled && "pointer-events-none opacity-50",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Centered icon placeholder for Dropzone.
+ */
+export const DropzoneIcon: Component<DropzoneIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mb-3 flex size-12 items-center justify-center rounded-lg bg-primary/10 text-primary transition-transform group-hover:scale-105",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children || <CloudUpload class="size-6" />}
+    </div>
+  );
+};
+
+export interface DropzoneTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+/**
+ * Primary title text for the dropzone prompt.
+ */
+export const DropzoneTitle: Component<DropzoneTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h4
+      class={cn("text-sm font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+/**
+ * Subtitle description text for dropzone file specifications.
+ */
+export const DropzoneDescription: Component<DropzoneDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 text-xs text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Container list for uploaded files.
+ */
+export const DropzoneFileList: Component<DropzoneFileListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div
+      class={cn("mt-4 flex w-full flex-col gap-2", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface DropzoneFileItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  size?: string;
+  onRemove?: () => void;
+}
+
+/**
+ * Individual uploaded file card with name, formatted size, and remove button.
+ */
+export const DropzoneFileItem: Component<DropzoneFileItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "size", "onRemove", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-border bg-card p-2.5 text-xs transition-colors",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2.5">
+        <div class="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          {local.children || <FileText class="size-4" />}
+        </div>
+        <div class="flex min-w-0 flex-col text-left">
+          <span class="truncate font-medium text-foreground">{local.name}</span>
+          {local.size && (
+            <span class="font-mono text-[11px] text-muted-foreground">{local.size}</span>
+          )}
+        </div>
+      </div>
+
+      {local.onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            local.onRemove?.();
+          }}
+          class="flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          aria-label="Remove file"
+        >
+          <X class="size-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export interface DropzoneRejectedItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  name: string;
+  error?: string;
+  size?: string;
+}
+
+/**
+ * Card for displaying rejected files and validation errors.
+ */
+export const DropzoneRejectedItem: Component<DropzoneRejectedItemProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "name", "error", "size"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-2.5 text-xs text-destructive",
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 items-center gap-2">
+        <AlertCircle class="size-4 shrink-0" />
+        <span class="truncate font-medium">{local.name}</span>
+        {local.size && <span class="font-mono text-[11px] opacity-80">({local.size})</span>}
+      </div>
+      {local.error && (
+        <span class="shrink-0 text-[11px] font-medium">{local.error}</span>
+      )}
+    </div>
+  );
+};

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

@@ -1,6 +1,6 @@
 import { splitProps, type Component, type JSX } from "solid-js";
 import { cn } from "@/lib/cn";
-import { Label, type LabelProps } from "./label";
+import { Label, type LabelProps } from "@/components/ui/label";
 
 export interface FieldProps extends JSX.HTMLAttributes<HTMLDivElement> {
   class?: string;
@@ -17,8 +17,9 @@ export const Field: Component<FieldProps> = (props) => {
   );
 };
 
-export interface FieldLabelProps extends LabelProps {
+export interface FieldLabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement>, LabelProps {
   class?: string;
+  for?: string;
   children?: JSX.Element;
 }
 
@@ -41,7 +42,10 @@ export const FieldDescription: Component<FieldDescriptionProps> = (props) => {
   const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
-    <p class={cn("text-sm text-muted-foreground", local.class)} {...rest}>
+    <p
+      class={cn("text-sm text-muted-foreground", local.class)}
+      {...rest}
+    >
       {local.children}
     </p>
   );