@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,195 @@
+import {
+  createSignal,
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { createElementSize } from "@/hooks/create-resize-observer";
+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;
+
+      // Min size limits (10% minimum)
+      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;
+
+  // Utilize Nikala UI createElementSize hook for reactive size inspection
+  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/dist/vendor/core-src/registry/components/ui/review-card.tsx

@@ -0,0 +1,195 @@
+import {
+  splitProps,
+  Show,
+  type JSX,
+  type ParentComponent,
+  type Component,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckCircle2 } from "lucide-solid";
+import { cn } from "@/lib/cn";
+import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+import { Rating, type RatingProps } from "./rating";
+
+/* --- 1. ReviewCard Root --- */
+export const reviewCardVariants = cva(
+  "relative flex flex-col justify-between rounded-lg transition-all duration-200 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border border-border bg-card text-card-foreground p-4 sm:p-5 shadow-2xs hover:shadow-xs",
+        bordered: "border-2 border-border bg-background text-foreground p-4 sm:p-5",
+        flat: "bg-muted/40 text-foreground p-4 sm:p-5",
+        glass: "backdrop-blur-md bg-card/70 border border-border/80 text-card-foreground p-4 sm:p-5 shadow-2xs",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface ReviewCardProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof reviewCardVariants> {
+  class?: string;
+}
+
+export const ReviewCard: ParentComponent<ReviewCardProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "children"]);
+
+  return (
+    <div
+      class={cn(reviewCardVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 2. ReviewHeader --- */
+export interface ReviewHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const ReviewHeader: ParentComponent<ReviewHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("flex items-start justify-between gap-3 mb-3 min-w-0 w-full", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 3. ReviewProfile (Avatar + Names container) --- */
+export interface ReviewProfileProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const ReviewProfile: ParentComponent<ReviewProfileProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("flex items-start gap-2.5 min-w-0 flex-1 overflow-hidden", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 4. ReviewAvatar --- */
+export interface ReviewAvatarProps {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  class?: string;
+}
+
+export const ReviewAvatar: Component<ReviewAvatarProps> = (props) => {
+  const [local] = splitProps(props, ["src", "alt", "fallback", "class"]);
+
+  return (
+    <Avatar class={cn("size-9 shrink-0 mt-0.5", local.class)}>
+      <Show when={local.src}>
+        <AvatarImage src={local.src!} alt={local.alt || "Reviewer Avatar"} />
+      </Show>
+      <AvatarFallback>
+        {local.fallback || (local.alt ? local.alt.slice(0, 2).toUpperCase() : "U")}
+      </AvatarFallback>
+    </Avatar>
+  );
+};
+
+/* --- 5. ReviewAuthor (Name & Subtitle/Role/Handle) --- */
+export interface ReviewAuthorProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "role"> {
+  name: string;
+  username?: string;
+  role?: string;
+  verified?: boolean;
+  class?: string;
+}
+
+export const ReviewAuthor: Component<ReviewAuthorProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "name",
+    "username",
+    "role",
+    "verified",
+    "class",
+  ]);
+
+  return (
+    <div class={cn("flex flex-col min-w-0 flex-1 overflow-hidden", local.class)} {...rest}>
+      <div class="flex items-center gap-1 font-semibold text-sm leading-tight text-foreground truncate">
+        <span class="truncate">{local.name}</span>
+        <Show when={local.verified}>
+          <CheckCircle2 class="size-3.5 text-primary shrink-0" />
+        </Show>
+      </div>
+      <Show when={local.username || local.role}>
+        <p class="text-xs text-muted-foreground truncate mt-0.5">
+          {local.username || local.role}
+        </p>
+      </Show>
+    </div>
+  );
+};
+
+/* --- 6. ReviewRating (Composing standalone Rating) --- */
+export interface ReviewRatingProps extends RatingProps {}
+
+export const ReviewRating: Component<ReviewRatingProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "size", "readOnly"]);
+
+  return (
+    <Rating
+      size={local.size || "sm"}
+      readOnly={local.readOnly !== undefined ? local.readOnly : true}
+      class={cn("shrink-0 select-none ml-auto pt-0.5", local.class)}
+      {...rest}
+    />
+  );
+};
+
+/* --- 7. ReviewBody (Quote / Content) --- */
+export interface ReviewBodyProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const ReviewBody: ParentComponent<ReviewBodyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      class={cn("text-xs sm:text-sm text-muted-foreground leading-relaxed", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};
+
+/* --- 8. ReviewFooter --- */
+export interface ReviewFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const ReviewFooter: ParentComponent<ReviewFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mt-3 pt-3 border-t border-border/40 flex items-center justify-between text-xs text-muted-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

package/dist/vendor/core-src/registry/components/ui/rich-text-editor/bubble-menu.tsx

@@ -0,0 +1,236 @@
+import {
+  createSignal,
+  createEffect,
+  onCleanup,
+  Show,
+  For,
+  type Component,
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { useRichTextEditor } from "./editor.js";
+import { ToolbarButton, HIGHLIGHT_PALETTE } from "./toolbar.js";
+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  Code,
+  Link as LinkIcon,
+  Highlighter,
+  Heading1,
+  Heading2,
+  List,
+  ListTodo,
+} from "lucide-solid";
+
+export const EditorBubbleMenu: Component = () => {
+  const { actions, container, isFullscreen, setShowLinkDialog } = useRichTextEditor();
+  const [isVisible, setIsVisible] = createSignal(false);
+  const [position, setPosition] = createSignal({ top: 0, left: 0 });
+  const [showHighlightPalette, setShowHighlightPalette] = createSignal(false);
+
+  createEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleSelectionChange = () => {
+      const ed = actions.editor();
+      const containerEl = container();
+      if (!ed || !ed.isFocused || !ed.isEditable) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const { from, to } = ed.state.selection;
+      if (from === to || ed.state.selection.empty) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      // Check that selection is inside the editor view element
+      const editorDom = ed.view.dom;
+      if (!editorDom.contains(range.commonAncestorContainer)) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+        return;
+      }
+
+      if (isFullscreen() && containerEl) {
+        const containerRect = containerEl.getBoundingClientRect();
+        const top = rect.top - containerRect.top - 46;
+        const left = rect.left - containerRect.left + rect.width / 2;
+
+        setPosition({
+          top: Math.max(8, top),
+          left: Math.max(140, Math.min(containerRect.width - 140, left)),
+        });
+      } else {
+        // Normal mode: viewport coordinates
+        setPosition({
+          top: Math.max(12, rect.top - 46),
+          left: Math.max(140, Math.min(window.innerWidth - 140, rect.left + rect.width / 2)),
+        });
+      }
+
+      setIsVisible(true);
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      // If clicking toolbar or any open popovers, hide bubble menu
+      if (
+        target.closest(".editor-popover-trigger") ||
+        target.closest(".editor-popover-content") ||
+        target.closest(".editor-toolbar")
+      ) {
+        setIsVisible(false);
+        setShowHighlightPalette(false);
+      }
+    };
+
+    document.addEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener("mousedown", handleMouseDown);
+
+    onCleanup(() => {
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      document.removeEventListener("mousedown", handleMouseDown);
+    });
+  });
+
+  const portalTarget = () => {
+    if (typeof document === "undefined") return undefined;
+    return isFullscreen() ? container() || document.body : document.body;
+  };
+
+  return (
+    <Show when={isVisible()}>
+      <Portal mount={portalTarget()}>
+        <div
+          class={`${
+            isFullscreen() ? "absolute" : "fixed"
+          } z-[999999] flex items-center gap-0.5 p-1 rounded-md border border-border bg-popover text-popover-foreground shadow-xl backdrop-blur-md -translate-x-1/2 transition-all duration-75 animate-in fade-in zoom-in-95 pointer-events-auto select-none`}
+          style={{
+            top: `${position().top}px`,
+            left: `${position().left}px`,
+          }}
+        >
+          <ToolbarButton onClick={actions.toggleBold} isActive={actions.isActive("bold")} tooltip="Bold">
+            <Bold class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleItalic} isActive={actions.isActive("italic")} tooltip="Italic">
+            <Italic class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleUnderline} isActive={actions.isActive("underline")} tooltip="Underline">
+            <UnderlineIcon class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleStrike} isActive={actions.isActive("strike")} tooltip="Strikethrough">
+            <Strikethrough class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton onClick={actions.toggleCode} isActive={actions.isActive("code")} tooltip="Code">
+            <Code class="h-3.5 w-3.5" />
+          </ToolbarButton>
+
+          {/* Marker Highlight with Tailwind Palette */}
+          <div class="relative">
+            <ToolbarButton
+              onClick={() => setShowHighlightPalette((p) => !p)}
+              isActive={actions.isActive("highlight")}
+              tooltip="Highlight Color"
+            >
+              <Highlighter class="h-3.5 w-3.5" />
+            </ToolbarButton>
+
+            <Show when={showHighlightPalette()}>
+              <div class="absolute top-full left-1/2 -translate-x-1/2 mt-1.5 z-30 flex flex-col gap-1.5 p-2 bg-popover text-popover-foreground border border-border rounded-lg shadow-2xl min-w-[200px]">
+                <div class="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  Marker Palette
+                </div>
+                <div class="grid grid-cols-5 gap-1.5">
+                  <For each={HIGHLIGHT_PALETTE}>
+                    {(color) => (
+                      <button
+                        type="button"
+                        title={color.name}
+                        class="h-6 w-6 rounded-md border border-border/60 hover:scale-110 transition-transform cursor-pointer shadow-2xs"
+                        style={{ "background-color": color.value }}
+                        onClick={() => {
+                          actions.toggleHighlight(color.value);
+                          setShowHighlightPalette(false);
+                        }}
+                      />
+                    )}
+                  </For>
+                </div>
+                <button
+                  type="button"
+                  class="w-full text-center py-1 mt-1 text-xs rounded-md bg-muted hover:bg-muted/80 text-foreground transition-colors cursor-pointer font-medium"
+                  onClick={() => {
+                    actions.toggleHighlight();
+                    setShowHighlightPalette(false);
+                  }}
+                >
+                  Clear Highlight
+                </button>
+              </div>
+            </Show>
+          </div>
+
+          <ToolbarButton
+            onClick={() => setShowLinkDialog(true)}
+            isActive={actions.isActive("link")}
+            tooltip="Insert Link"
+          >
+            <LinkIcon class="h-3.5 w-3.5" />
+          </ToolbarButton>
+
+          <div class="h-4 w-px bg-border mx-0.5" />
+
+          <ToolbarButton
+            onClick={() => actions.setHeading(1)}
+            isActive={actions.isActive("heading", { level: 1 })}
+            tooltip="H1"
+          >
+            <Heading1 class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => actions.setHeading(2)}
+            isActive={actions.isActive("heading", { level: 2 })}
+            tooltip="H2"
+          >
+            <Heading2 class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={actions.toggleBulletList}
+            isActive={actions.isActive("bulletList")}
+            tooltip="List"
+          >
+            <List class="h-3.5 w-3.5" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={actions.toggleTaskList}
+            isActive={actions.isActive("taskList")}
+            tooltip="Tasks"
+          >
+            <ListTodo class="h-3.5 w-3.5" />
+          </ToolbarButton>
+        </div>
+      </Portal>
+    </Show>
+  );
+};