@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,102 @@
+import {
+  splitProps,
+  type Component,
+  type JSX,
+  type ParentComponent,
+  Show,
+} from "solid-js";
+import { cn } from "@/lib/cn";
+
+/* --- 1. Marker Root --- */
+export interface MarkerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const Marker: ParentComponent<MarkerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      role="status"
+      class={cn("flex w-full items-center justify-center my-3 text-center select-none", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 2. MarkerContent --- */
+export interface MarkerContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MarkerContent: ParentComponent<MarkerContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "inline-flex items-center gap-1.5 rounded-lg border border-border/60 bg-muted/40 px-3 py-1 text-xs text-muted-foreground shadow-2xs backdrop-blur-xs",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 3. MarkerDate (Date Divider) --- */
+export interface MarkerDateProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  date?: string;
+  class?: string;
+}
+
+export const MarkerDate: ParentComponent<MarkerDateProps> = (props) => {
+  const [local, rest] = splitProps(props, ["date", "class", "children"]);
+
+  return (
+    <div
+      class={cn("relative flex w-full items-center justify-center my-4", local.class)}
+      {...rest}
+    >
+      <div class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-border/50" />
+      </div>
+      <div class="relative flex items-center gap-1 bg-background px-3 py-0.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground rounded-md border border-border/40">
+        {local.children || local.date}
+      </div>
+    </div>
+  );
+};
+
+/* --- 4. MarkerTyping (Live Typing Indicator) --- */
+export interface MarkerTypingProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  class?: string;
+}
+
+export const MarkerTyping: Component<MarkerTypingProps> = (props) => {
+  const [local, rest] = splitProps(props, ["name", "class"]);
+
+  return (
+    <div
+      role="status"
+      aria-label={`${local.name || "Someone"} is typing`}
+      class={cn("flex w-full items-center gap-2 text-xs text-muted-foreground my-2", local.class)}
+      {...rest}
+    >
+      <Show when={local.name}>
+        <span class="font-medium text-foreground">{local.name}</span> is typing
+      </Show>
+
+      {/* 3 Animated Bouncing Dots */}
+      <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-muted/60 border border-border/40">
+        <span class="size-1.5 rounded-lg bg-foreground/60 animate-bounce [animation-delay:-0.3s]" />
+        <span class="size-1.5 rounded-lg bg-foreground/60 animate-bounce [animation-delay:-0.15s]" />
+        <span class="size-1.5 rounded-lg bg-foreground/60 animate-bounce" />
+      </span>
+    </div>
+  );
+};

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

@@ -0,0 +1,118 @@
+import {
+  splitProps,
+  createMemo,
+  Index,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface MarqueeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+  vertical?: boolean;
+  repeat?: number;
+  duration?: number | string;
+  gap?: string;
+  fadeEdges?: boolean;
+}
+
+export const Marquee: ParentComponent<MarqueeProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "reverse",
+    "pauseOnHover",
+    "vertical",
+    "repeat",
+    "duration",
+    "gap",
+    "fadeEdges",
+    "children",
+  ]);
+
+  const repeatCount = () => local.repeat ?? 4;
+  const durationValue = () =>
+    typeof local.duration === "number"
+      ? `${local.duration}s`
+      : local.duration || "40s";
+  const gapValue = () => local.gap || "1rem";
+
+  const repeatArray = createMemo(() =>
+    Array.from({ length: repeatCount() }, (_, i) => i)
+  );
+
+  return (
+    <>
+      <style>{`
+        @keyframes nikala-marquee {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(calc(-100% - var(--marquee-gap, 1rem)));
+          }
+        }
+        @keyframes nikala-marquee-vertical {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(calc(-100% - var(--marquee-gap, 1rem)));
+          }
+        }
+        .nikala-marquee-track {
+          animation: nikala-marquee var(--marquee-duration, 40s) linear infinite;
+        }
+        .nikala-marquee-track-vertical {
+          animation: nikala-marquee-vertical var(--marquee-duration, 40s) linear infinite;
+        }
+        [data-reverse="true"] .nikala-marquee-track,
+        [data-reverse="true"] .nikala-marquee-track-vertical {
+          animation-direction: reverse;
+        }
+        [data-pause="true"]:hover .nikala-marquee-track,
+        [data-pause="true"]:hover .nikala-marquee-track-vertical {
+          animation-play-state: paused;
+        }
+      `}</style>
+      <div
+        data-reverse={local.reverse ? "true" : "false"}
+        data-pause={local.pauseOnHover ? "true" : "false"}
+        style={{
+          "--marquee-duration": durationValue(),
+          "--marquee-gap": gapValue(),
+        }}
+        class={cn(
+          "group flex overflow-hidden p-2 select-none",
+          local.vertical ? "flex-col h-full" : "flex-row w-full",
+          local.fadeEdges &&
+            (local.vertical
+              ? "[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]"
+              : "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]"),
+          local.class
+        )}
+        {...rest}
+      >
+        <Index each={repeatArray()}>
+          {() => (
+            <div
+              class={cn(
+                "flex shrink-0 justify-around items-center",
+                local.vertical
+                  ? "flex-col min-h-full nikala-marquee-track-vertical"
+                  : "flex-row min-w-full nikala-marquee-track"
+              )}
+              style={{
+                gap: gapValue(),
+                [local.vertical ? "margin-bottom" : "margin-right"]: gapValue(),
+              }}
+            >
+              {local.children}
+            </div>
+          )}
+        </Index>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,168 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type ParentComponent,
+  type Accessor,
+} from "solid-js";
+import { cn } from "@/lib/cn";
+
+/* --- 1. Message Context --- */
+export type MessageAlignment = "start" | "end";
+
+interface MessageContextValue {
+  align: Accessor<MessageAlignment>;
+}
+
+const MessageContext = createContext<MessageContextValue>();
+
+export function useMessage() {
+  const context = useContext(MessageContext);
+  if (!context) {
+    throw new Error("useMessage must be used within a <Message />");
+  }
+  return context;
+}
+
+/* --- 2. Message Root --- */
+export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  align?: MessageAlignment;
+  class?: string;
+}
+
+export const Message: ParentComponent<MessageProps> = (props) => {
+  const [local, rest] = splitProps(props, ["align", "class", "children"]);
+  const align = () => local.align ?? "start";
+
+  const contextValue: MessageContextValue = {
+    align,
+  };
+
+  return (
+    <MessageContext.Provider value={contextValue}>
+      <div
+        data-align={align()}
+        class={cn(
+          "group/message flex w-full gap-3",
+          align() === "end" ? "flex-row-reverse items-start" : "flex-row items-start",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </div>
+    </MessageContext.Provider>
+  );
+};
+
+/* --- 3. MessageAvatar --- */
+export interface MessageAvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MessageAvatar: ParentComponent<MessageAvatarProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("shrink-0 select-none pt-0.5", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 4. MessageHeader --- */
+export interface MessageHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MessageHeader: ParentComponent<MessageHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const { align } = useMessage();
+
+  return (
+    <div
+      class={cn(
+        "flex items-center gap-2 text-xs text-muted-foreground select-none mb-1",
+        align() === "end" ? "justify-end" : "justify-start",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 5. MessageContent --- */
+export interface MessageContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MessageContent: ParentComponent<MessageContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const { align } = useMessage();
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col gap-1.5 max-w-[85%] sm:max-w-[75%]",
+        align() === "end" ? "items-end text-right" : "items-start text-left",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 6. MessageFooter --- */
+export interface MessageFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MessageFooter: ParentComponent<MessageFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const { align } = useMessage();
+
+  return (
+    <div
+      class={cn(
+        "flex items-center gap-1.5 text-[11px] text-muted-foreground select-none mt-1",
+        align() === "end" ? "justify-end" : "justify-start",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 7. MessageActions --- */
+export interface MessageActionsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const MessageActions: ParentComponent<MessageActionsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  const { align } = useMessage();
+
+  return (
+    <div
+      class={cn(
+        "opacity-0 group-hover/message:opacity-100 focus-within:opacity-100 transition-opacity flex items-center gap-1 p-0.5 rounded-md border border-border bg-background shadow-xs",
+        align() === "end" ? "flex-row-reverse" : "flex-row",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};