@nikala-ui/core 0.10.1 → 0.11.0

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

@@ -0,0 +1,247 @@
+import { splitProps, type JSX, type ParentComponent } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- Root Footer --- */
+export const footerVariants = cva("w-full transition-colors", {
+  variants: {
+    variant: {
+      default: "bg-background border-t border-border/60 text-foreground",
+      muted: "bg-muted/40 border-t border-border text-foreground",
+      bordered: "bg-background border-t-2 border-border text-foreground",
+      floating: "my-8 rounded-lg border border-border/80 bg-card text-card-foreground shadow-xs",
+      transparent: "bg-transparent border-transparent text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+export interface FooterProps
+  extends JSX.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof footerVariants> {
+  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+}
+
+export const Footer: ParentComponent<FooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "maxWidth", "children"]);
+
+  const maxWidthClass = () => {
+    switch (local.maxWidth) {
+      case "sm":
+        return "max-w-screen-sm";
+      case "md":
+        return "max-w-screen-md";
+      case "lg":
+        return "max-w-screen-lg";
+      case "xl":
+        return "max-w-screen-xl";
+      case "full":
+        return "max-w-full";
+      case "2xl":
+      default:
+        return "max-w-screen-2xl";
+    }
+  };
+
+  return (
+    <footer
+      class={cn(
+        footerVariants({ variant: local.variant }),
+        local.variant === "floating" && cn("mx-auto", maxWidthClass()),
+        local.class
+      )}
+      {...rest}
+    >
+      <div class={cn("w-full", local.variant !== "floating" && cn("mx-auto", maxWidthClass()))}>
+        {local.children}
+      </div>
+    </footer>
+  );
+};
+
+/* --- Footer Container --- */
+export interface FooterContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterContainer: ParentComponent<FooterContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("px-4 sm:px-6 lg:px-8 py-10 sm:py-12 md:py-16 w-full", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Content (Columns Grid / Layout) --- */
+export interface FooterContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterContent: ParentComponent<FooterContentProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 lg:gap-12",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Column --- */
+export interface FooterColumnProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterColumn: ParentComponent<FooterColumnProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("flex flex-col space-y-3", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Column Title --- */
+export interface FooterColumnTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const FooterColumnTitle: ParentComponent<FooterColumnTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <h4
+      class={cn(
+        "text-xs font-semibold uppercase tracking-wider text-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </h4>
+  );
+};
+
+/* --- Footer Column List --- */
+export interface FooterColumnListProps extends JSX.HTMLAttributes<HTMLUListElement> {
+  class?: string;
+}
+
+export const FooterColumnList: ParentComponent<FooterColumnListProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <ul class={cn("space-y-2 list-none p-0 m-0", local.class)} {...rest}>
+      {local.children}
+    </ul>
+  );
+};
+
+/* --- Footer Link --- */
+export interface FooterLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
+  class?: string;
+}
+
+export const FooterLink: ParentComponent<FooterLinkProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <li>
+      <a
+        class={cn(
+          "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </a>
+    </li>
+  );
+};
+
+/* --- Footer Brand / Info Section --- */
+export interface FooterBrandProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterBrand: ParentComponent<FooterBrandProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "col-span-2 sm:col-span-2 md:col-span-4 lg:col-span-2 flex flex-col space-y-3 mb-4 lg:mb-0",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Bottom (Copyright and Secondary Links Bar) --- */
+export interface FooterBottomProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterBottom: ParentComponent<FooterBottomProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "mt-12 sm:mt-16 pt-8 border-t border-border/50 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Footer Copyright Text --- */
+export interface FooterCopyrightProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const FooterCopyright: ParentComponent<FooterCopyrightProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p class={cn("text-xs text-muted-foreground leading-relaxed", local.class)} {...rest}>
+      {local.children}
+    </p>
+  );
+};
+
+/* --- Footer Social Links Container --- */
+export interface FooterSocialsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const FooterSocials: ParentComponent<FooterSocialsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div class={cn("flex items-center gap-3 text-muted-foreground", local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};

package/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/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/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>
+  );
+};