@nikala-ui/core 0.9.11 → 0.9.12

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

@@ -0,0 +1,193 @@
+import {
+  createSignal,
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createElementSize } from "@nikala-ui/hooks";
+import { GripVertical, GripHorizontal } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export interface ResizableContextValue {
+  orientation: Accessor<"horizontal" | "vertical">;
+  registerPanel: (id: string, initialSizes: number) => void;
+  sizes: Accessor<Record<string, number>>;
+  startDragging: (handleIndex: number, event: PointerEvent) => void;
+  containerRef: () => HTMLDivElement | undefined;
+}
+
+const ResizableContext = createContext<ResizableContextValue>();
+
+export interface ResizableGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ResizableGroup: Component<ResizableGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["orientation", "class", "children"]);
+  const orientation = () => local.orientation || "horizontal";
+  let containerEl: HTMLDivElement | undefined;
+
+  const [panelOrder, setPanelOrder] = createSignal<string[]>([]);
+  const [sizes, setSizes] = createSignal<Record<string, number>>({});
+
+  const registerPanel = (id: string, initialSize: number) => {
+    setPanelOrder((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    setSizes((prev) => (prev[id] !== undefined ? prev : { ...prev, [id]: initialSize }));
+  };
+
+  const startDragging = (handleIndex: number, event: PointerEvent) => {
+    if (!containerEl) return;
+    event.preventDefault();
+
+    const order = panelOrder();
+    if (handleIndex < 0 || handleIndex >= order.length - 1) return;
+
+    const leftId = order[handleIndex];
+    const rightId = order[handleIndex + 1];
+
+    const isHoriz = orientation() === "horizontal";
+    const startPos = isHoriz ? event.clientX : event.clientY;
+    const rect = containerEl.getBoundingClientRect();
+    const totalPx = isHoriz ? rect.width : rect.height;
+
+    const startLeftPct = sizes()[leftId] ?? 50;
+    const startRightPct = sizes()[rightId] ?? 50;
+
+    const onPointerMove = (e: PointerEvent) => {
+      const currentPos = isHoriz ? e.clientX : e.clientY;
+      const deltaPx = currentPos - startPos;
+      const deltaPct = (deltaPx / totalPx) * 100;
+
+      let newLeft = startLeftPct + deltaPct;
+      let newRight = startRightPct - deltaPct;
+
+      if (newLeft < 10) {
+        newLeft = 10;
+        newRight = startLeftPct + startRightPct - 10;
+      } else if (newRight < 10) {
+        newRight = 10;
+        newLeft = startLeftPct + startRightPct - 10;
+      }
+
+      setSizes((prev) => ({
+        ...prev,
+        [leftId]: newLeft,
+        [rightId]: newRight,
+      }));
+    };
+
+    const onPointerUp = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  return (
+    <ResizableContext.Provider
+      value={{
+        orientation,
+        registerPanel,
+        sizes,
+        startDragging,
+        containerRef: () => containerEl,
+      }}
+    >
+      <div
+        ref={containerEl}
+        class={cn(
+          "flex h-full w-full overflow-hidden rounded-lg border border-border bg-background",
+          orientation() === "vertical" ? "flex-col" : "flex-row",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </ResizableContext.Provider>
+  );
+};
+
+export interface ResizablePanelProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  id: string;
+  initialSize?: number;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ResizablePanel: Component<ResizablePanelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["id", "initialSize", "class", "children"]);
+  const ctx = useContext(ResizableContext);
+
+  if (!ctx) {
+    throw new Error("ResizablePanel must be used within a ResizableGroup");
+  }
+
+  ctx.registerPanel(local.id, local.initialSize ?? 50);
+
+  const currentPct = () => ctx.sizes()[local.id] ?? local.initialSize ?? 50;
+
+  const containerSize = createElementSize(() => ctx.containerRef());
+
+  return (
+    <div
+      class={cn("overflow-auto transition-[flex-basis] duration-75", local.class)}
+      style={{
+        "flex-basis": `${currentPct()}%`,
+        "flex-grow": 0,
+        "flex-shrink": 0,
+      }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+export interface ResizableHandleProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  handleIndex: number;
+  withHandle?: boolean;
+  class?: string;
+}
+
+export const ResizableHandle: Component<ResizableHandleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["handleIndex", "withHandle", "class"]);
+  const ctx = useContext(ResizableContext);
+
+  if (!ctx) {
+    throw new Error("ResizableHandle must be used within a ResizableGroup");
+  }
+
+  const isHoriz = () => ctx.orientation() === "horizontal";
+
+  return (
+    <div
+      role="separator"
+      tabIndex={0}
+      class={cn(
+        "relative flex select-none items-center justify-center bg-border transition-colors hover:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring cursor-col-resize",
+        isHoriz() ? "h-full w-1.5 cursor-col-resize" : "h-1.5 w-full cursor-row-resize",
+        local.class
+      )}
+      onPointerDown={(e) => ctx.startDragging(local.handleIndex, e)}
+      {...rest}
+    >
+      {local.withHandle && (
+        <div class="z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border bg-muted shadow-2xs">
+          {isHoriz() ? (
+            <GripVertical class="h-2.5 w-2.5 text-muted-foreground" />
+          ) : (
+            <GripHorizontal class="h-2.5 w-2.5 text-muted-foreground" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/registry/components/ui/scroll-area.tsx

@@ -0,0 +1,218 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createScrollPosition, createElementSize } from "@nikala-ui/hooks";
+import { cn } from "@/lib/cn";
+
+export interface ScrollAreaProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal" | "both";
+  scrollHideDelay?: number;
+  class?: string;
+  children?: JSX.Element;
+}
+
+export const ScrollArea: Component<ScrollAreaProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "scrollHideDelay",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation || "vertical";
+  let viewportRef: HTMLDivElement | undefined;
+  let verticalTrackRef: HTMLDivElement | undefined;
+  let horizontalTrackRef: HTMLDivElement | undefined;
+
+  const scrollPos = createScrollPosition({
+    target: () => viewportRef,
+  });
+
+  const viewportSize = createElementSize(() => viewportRef);
+
+  const [thumbHeight, setThumbHeight] = createSignal(0);
+  const [thumbTop, setThumbTop] = createSignal(0);
+  const [thumbWidth, setThumbWidth] = createSignal(0);
+  const [thumbLeft, setThumbLeft] = createSignal(0);
+  const [isDragging, setIsDragging] = createSignal(false);
+
+  const updateThumbMetrics = () => {
+    if (!viewportRef) return;
+
+    const scrollHeight = viewportRef.scrollHeight;
+    const clientHeight = viewportRef.clientHeight;
+    const scrollWidth = viewportRef.scrollWidth;
+    const clientWidth = viewportRef.clientWidth;
+
+    const trackHeight = verticalTrackRef ? verticalTrackRef.clientHeight - 4 : clientHeight - 4;
+    const trackWidth = horizontalTrackRef ? horizontalTrackRef.clientWidth - 4 : clientWidth - 4;
+
+    if (scrollHeight > clientHeight && clientHeight > 0) {
+      const vRatio = clientHeight / scrollHeight;
+      const calculatedHeight = Math.max(vRatio * trackHeight, 20);
+      const maxTop = trackHeight - calculatedHeight;
+      const topPct = scrollPos.y() / (scrollHeight - clientHeight);
+      setThumbHeight(calculatedHeight);
+      setThumbTop(topPct * maxTop);
+    } else {
+      setThumbHeight(0);
+    }
+
+    if (scrollWidth > clientWidth && clientWidth > 0) {
+      const hRatio = clientWidth / scrollWidth;
+      const calculatedWidth = Math.max(hRatio * trackWidth, 20);
+      const maxLeft = trackWidth - calculatedWidth;
+      const leftPct = scrollPos.x() / (scrollWidth - clientWidth);
+      setThumbWidth(calculatedWidth);
+      setThumbLeft(leftPct * maxLeft);
+    } else {
+      setThumbWidth(0);
+    }
+  };
+
+  createEffect(() => {
+    viewportSize.width();
+    viewportSize.height();
+    scrollPos.x();
+    scrollPos.y();
+    updateThumbMetrics();
+  });
+
+  const handleVerticalThumbPointerDown = (e: PointerEvent) => {
+    if (!viewportRef || !verticalTrackRef) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    const startY = e.clientY;
+    const startScrollTop = viewportRef.scrollTop;
+    const scrollHeight = viewportRef.scrollHeight;
+    const clientHeight = viewportRef.clientHeight;
+    const trackHeight = verticalTrackRef.clientHeight - 4;
+
+    const maxScrollTop = scrollHeight - clientHeight;
+    const maxThumbTop = trackHeight - thumbHeight();
+    const ratio = maxThumbTop > 0 ? maxScrollTop / maxThumbTop : 0;
+
+    const onPointerMove = (moveEvent: PointerEvent) => {
+      const deltaY = moveEvent.clientY - startY;
+      viewportRef!.scrollTop = Math.max(0, Math.min(maxScrollTop, startScrollTop + deltaY * ratio));
+    };
+
+    const onPointerUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  const handleHorizontalThumbPointerDown = (e: PointerEvent) => {
+    if (!viewportRef || !horizontalTrackRef) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    const startX = e.clientX;
+    const startScrollLeft = viewportRef.scrollLeft;
+    const scrollWidth = viewportRef.scrollWidth;
+    const clientWidth = viewportRef.clientWidth;
+    const trackWidth = horizontalTrackRef.clientWidth - 4;
+
+    const maxScrollLeft = scrollWidth - clientWidth;
+    const maxThumbLeft = trackWidth - thumbWidth();
+    const ratio = maxThumbLeft > 0 ? maxScrollLeft / maxThumbLeft : 0;
+
+    const onPointerMove = (moveEvent: PointerEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      viewportRef!.scrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + deltaX * ratio));
+    };
+
+    const onPointerUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+  };
+
+  const handleWheel = (e: WheelEvent) => {
+    if (orientation() === "horizontal" && viewportRef) {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        e.preventDefault();
+        viewportRef.scrollLeft += e.deltaY;
+      }
+    }
+  };
+
+  return (
+    <div
+      class={cn("relative overflow-hidden group/scroll-area", local.class)}
+      onWheel={handleWheel}
+      {...rest}
+    >
+      <div
+        ref={viewportRef}
+        class="h-full w-full overflow-auto scrollbar-none rounded-[inherit]"
+        style={{
+          "scrollbar-width": "none",
+          "-ms-overflow-style": "none",
+        }}
+      >
+        {local.children}
+      </div>
+
+      {(orientation() === "vertical" || orientation() === "both") && thumbHeight() > 0 && (
+        <div
+          ref={verticalTrackRef}
+          class={cn(
+            "absolute right-0 top-0 bottom-0 w-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none",
+            scrollPos.isScrolling() || isDragging()
+              ? "opacity-100"
+              : "opacity-0 group-hover/scroll-area:opacity-100"
+          )}
+        >
+          <div
+            class="w-1.5 rounded-full bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            style={{
+              height: `${thumbHeight()}px`,
+              transform: `translateY(${thumbTop()}px)`,
+            }}
+            onPointerDown={handleVerticalThumbPointerDown}
+          />
+        </div>
+      )}
+
+      {(orientation() === "horizontal" || orientation() === "both") && thumbWidth() > 0 && (
+        <div
+          ref={horizontalTrackRef}
+          class={cn(
+            "absolute bottom-0 left-0 right-0 h-2.5 p-0.5 select-none transition-opacity duration-300 pointer-events-none",
+            scrollPos.isScrolling() || isDragging()
+              ? "opacity-100"
+              : "opacity-0 group-hover/scroll-area:opacity-100"
+          )}
+        >
+          <div
+            class="h-1.5 rounded-full bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            style={{
+              width: `${thumbWidth()}px`,
+              transform: `translateX(${thumbLeft()}px)`,
+            }}
+            onPointerDown={handleHorizontalThumbPointerDown}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -1,23 +1,20 @@
-import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import { splitProps, type Component, type JSX, type ValidComponent } from "solid-js";
 import * as SelectPrimitive from "@kobalte/core/select";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import { createClickOutside } from "@nikala-ui/hooks";
+import { ScrollArea } from "./scroll-area";
 import { cn } from "@/lib/cn";
 
 export type SelectRootProps<Option = any, OptGroup = any, T extends ValidComponent = "div"> =
-  SelectPrimitive.SelectRootProps<Option, OptGroup, T> & {
-    class?: string;
-  };
+  SelectPrimitive.SelectRootProps<Option, OptGroup, T>;
 
 /**
- * Root Select component built on top of Kobalte headless primitives.
+ * Root Select component wrapper built on Kobalte primitives.
  */
 export const Select = <Option = any, OptGroup = any, T extends ValidComponent = "div">(
-  props: PolymorphicProps<T, SelectRootProps<Option, OptGroup, T>>
+  props: SelectRootProps<Option, OptGroup, T>
 ) => {
-  const [local, rest] = splitProps(props as SelectRootProps, ["class"]);
-
-  return <SelectPrimitive.Root class={cn("relative w-full", local.class)} {...(rest as any)} />;
+  return <SelectPrimitive.Root {...props} />;
 };
 
 export type SelectTriggerProps<T extends ValidComponent = "button"> =
@@ -109,12 +106,14 @@ export const SelectContent = <T extends ValidComponent = "div">(
           if (typeof (props as any).ref === "function") (props as any).ref(el);
         }}
         class={cn(
-          "relative z-50 min-w-8rem overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
+          "relative z-50 min-w-8rem overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md animate-in fade-in-80 max-h-60",
           local.class
         )}
         {...rest}
       >
-        <SelectPrimitive.Listbox class="p-1 outline-none" />
+        <ScrollArea class="max-h-60 w-full">
+          <SelectPrimitive.Listbox class="p-1 outline-none" />
+        </ScrollArea>
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   );
@@ -137,16 +136,23 @@ export const SelectItem = <T extends ValidComponent = "li">(
   return (
     <SelectPrimitive.Item
       class={cn(
-        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 text-foreground",
         local.class
       )}
       {...rest}
     >
-      <SelectPrimitive.ItemIndicator class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-        <svg class="h-4 w-4 fill-none stroke-current stroke-2" viewBox="0 0 24 24">
+      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator
+          as="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="M5 13l4 4L19 7" />
-        </svg>
-      </SelectPrimitive.ItemIndicator>
+        </SelectPrimitive.ItemIndicator>
+      </span>
       <SelectPrimitive.ItemLabel>{local.children}</SelectPrimitive.ItemLabel>
     </SelectPrimitive.Item>
   );