@nikala-ui/core 0.10.1 → 0.11.0

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

@@ -0,0 +1,185 @@
+import {
+  createSignal,
+  splitProps,
+  For,
+  type JSX,
+  type Component,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Star } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+export const ratingVariants = cva(
+  "inline-flex items-center select-none transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "gap-0.5",
+        default: "gap-1",
+        lg: "gap-1.5",
+      },
+      variant: {
+        yellow: "text-amber-500 dark:text-amber-400",
+        primary: "text-primary",
+        destructive: "text-destructive",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "yellow",
+    },
+  }
+);
+
+export const ratingStarVariants = cva(
+  "transition-all duration-150 shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        default: "size-4.5",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface RatingProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange">,
+    VariantProps<typeof ratingVariants> {
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  readOnly?: boolean;
+  disabled?: boolean;
+  class?: string;
+  starClass?: string;
+  onChange?: (value: number) => void;
+  onHover?: (value: number | null) => void;
+}
+
+export const Rating: Component<RatingProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "value",
+    "defaultValue",
+    "max",
+    "readOnly",
+    "disabled",
+    "size",
+    "variant",
+    "class",
+    "starClass",
+    "onChange",
+    "onHover",
+  ]);
+
+  const [internalValue, setInternalValue] = createSignal(
+    local.defaultValue ?? 0
+  );
+  const [hoverValue, setHoverValue] = createSignal<number | null>(null);
+
+  const currentValue = () =>
+    local.value !== undefined ? local.value : internalValue();
+
+  const maxStars = () => local.max ?? 5;
+  const isInteractive = () => !local.readOnly && !local.disabled;
+
+  const stars = () => Array.from({ length: maxStars() }, (_, i) => i + 1);
+
+  const handleSelect = (starValue: number) => {
+    if (!isInteractive()) return;
+    if (local.value === undefined) {
+      setInternalValue(starValue);
+    }
+    local.onChange?.(starValue);
+  };
+
+  const handleMouseEnter = (starValue: number) => {
+    if (!isInteractive()) return;
+    setHoverValue(starValue);
+    local.onHover?.(starValue);
+  };
+
+  const handleMouseLeave = () => {
+    if (!isInteractive()) return;
+    setHoverValue(null);
+    local.onHover?.(null);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isInteractive()) return;
+
+    const val = currentValue();
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const next = Math.min(maxStars(), val + 1);
+      handleSelect(next);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const prev = Math.max(1, val - 1);
+      handleSelect(prev);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      handleSelect(1);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      handleSelect(maxStars());
+    }
+  };
+
+  return (
+    <div
+      role={isInteractive() ? "radiogroup" : "img"}
+      aria-label={`Rating: ${currentValue()} of ${maxStars()} stars`}
+      tabIndex={isInteractive() ? 0 : undefined}
+      onKeyDown={handleKeyDown}
+      onMouseLeave={handleMouseLeave}
+      class={cn(
+        ratingVariants({ size: local.size, variant: local.variant }),
+        local.disabled && "opacity-50 cursor-not-allowed",
+        isInteractive() && "cursor-pointer focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+        local.class
+      )}
+      {...rest}
+    >
+      <For each={stars()}>
+        {(star) => {
+          const isFilled = () => {
+            const active = hoverValue() !== null ? hoverValue()! : currentValue();
+            return star <= active;
+          };
+
+          return (
+            <button
+              type="button"
+              disabled={local.disabled || local.readOnly}
+              tabIndex={-1}
+              aria-label={`${star} star${star > 1 ? "s" : ""}`}
+              onClick={() => handleSelect(star)}
+              onMouseEnter={() => handleMouseEnter(star)}
+              class={cn(
+                "p-0.5 border-0 bg-transparent transition-transform focus:outline-hidden",
+                isInteractive() && "hover:scale-115 active:scale-95 cursor-pointer",
+                local.readOnly && "cursor-default",
+                local.disabled && "cursor-not-allowed"
+              )}
+            >
+              <Star
+                class={cn(
+                  ratingStarVariants({ size: local.size }),
+                  isFilled()
+                    ? "fill-current"
+                    : "text-muted-foreground/30 fill-transparent",
+                  local.starClass
+                )}
+              />
+            </button>
+          );
+        }}
+      </For>
+    </div>
+  );
+};

package/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/src/registry/components/ui/scroll-area.tsx

@@ -183,7 +183,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
           )}
         >
           <div
-            class="w-1.5 rounded-full bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            class="w-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
             style={{
               height: `${thumbHeight()}px`,
               transform: `translateY(${thumbTop()}px)`,
@@ -204,7 +204,7 @@ export const ScrollArea: Component<ScrollAreaProps> = (props) => {
           )}
         >
           <div
-            class="h-1.5 rounded-full bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
+            class="h-1.5 rounded-lg bg-border hover:bg-muted-foreground/50 transition-colors cursor-pointer pointer-events-auto"
             style={{
               width: `${thumbWidth()}px`,
               transform: `translateX(${thumbLeft()}px)`,