@nikala-ui/core 0.9.11 → 0.10.0

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>
   );

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

@@ -2,6 +2,8 @@ import { splitProps, type Component, type JSX, type ValidComponent, Show } from
 import * as DialogPrimitive from "@kobalte/core/dialog";
 import type { PolymorphicProps } from "@kobalte/core/polymorphic";
 import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-solid";
+import { ScrollArea } from "./scroll-area";
 import { cn } from "@/lib/cn";
 
 // Global CSS Keyframe Animations specifically designed for Kobalte animationend DOM events
@@ -13,7 +15,7 @@ const sheetStyles = `
 @keyframes sheet-slide-in-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
 @keyframes sheet-slide-out-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
 @keyframes sheet-slide-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
-@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
+@keyframes sheet-slide-out-bottom { from { transform: translateY(0); } to { transform: translateY(-100%); } }
 @keyframes sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }
 @keyframes sheet-fade-out { from { opacity: 1; } to { opacity: 0; } }
 `;
@@ -26,10 +28,12 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        left: "fixed top-0 bottom-0 left-0 w-3/4 border-r border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-left_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-left_300ms_ease-in-out]",
-        right: "fixed top-0 bottom-0 right-0 w-3/4 border-l border-border sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-right_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-right_300ms_ease-in-out]",
-        top: "fixed top-0 left-0 right-0 border-b border-border data-[expanded]:animate-[sheet-slide-in-top_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-top_300ms_ease-in-out]",
-        bottom: "fixed bottom-0 left-0 right-0 border-t border-border data-[expanded]:animate-[sheet-slide-in-bottom_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-bottom_300ms_ease-in-out]",
+        top: "inset-x-0 top-0 border-b data-[expanded]:animate-[sheet-slide-in-top_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-top_300ms_ease-in-out]",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[expanded]:animate-[sheet-slide-in-bottom_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-bottom_300ms_ease-in-out]",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-left_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-left_300ms_ease-in-out]",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm data-[expanded]:animate-[sheet-slide-in-right_300ms_ease-in-out] data-[closed]:animate-[sheet-slide-out-right_300ms_ease-in-out]",
       },
     },
     defaultVariants: {
@@ -38,23 +42,20 @@ export const sheetVariants = cva(
   }
 );
 
-export type SheetRootProps = DialogPrimitive.DialogRootProps;
-
-export const Sheet: Component<SheetRootProps> = (props) => {
-  return <DialogPrimitive.Root {...props} />;
-};
-
+export const Sheet = DialogPrimitive.Root;
 export const SheetTrigger = DialogPrimitive.Trigger;
 export const SheetClose = DialogPrimitive.CloseButton;
+export const SheetPortal = DialogPrimitive.Portal;
 
-export interface SheetOverlayProps<T extends ValidComponent = "div"> {
-  /** Whether to apply background blur effect or keep transparent (default: true) */
-  blur?: boolean;
-  class?: string;
-}
+export type SheetOverlayProps<T extends ValidComponent = "div"> =
+  DialogPrimitive.DialogOverlayProps<T> & {
+    /** Whether to apply backdrop blur (default: true) */
+    blur?: boolean;
+    class?: string;
+  };
 
 /**
- * Backdrop overlay wrapper with fade-in and fade-out animations.
+ * Fullscreen dark backdrop with fade keyframe animation.
  */
 export const SheetOverlay = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, SheetOverlayProps<T>>
@@ -64,8 +65,8 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
   return (
     <DialogPrimitive.Overlay
       class={cn(
-        "fixed inset-0 z-50 data-[expanded]:animate-[sheet-fade-in_300ms_ease-in-out] data-[closed]:animate-[sheet-fade-out_300ms_ease-in-out]",
-        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-transparent",
+        "fixed inset-0 z-50 transition-all duration-200 data-[expanded]:animate-[sheet-fade-in_300ms_ease-in-out] data-[closed]:animate-[sheet-fade-out_300ms_ease-in-out]",
+        local.blur !== false ? "bg-black/80 backdrop-blur-sm" : "bg-black/80",
         local.class
       )}
       {...(rest as any)}
@@ -75,32 +76,28 @@ export const SheetOverlay = <T extends ValidComponent = "div">(
 
 export type SheetContentProps<T extends ValidComponent = "div"> =
   DialogPrimitive.DialogContentProps<T> &
-  VariantProps<typeof sheetVariants> & {
-    /** Direction from which the sheet slides out: top, bottom, left, right */
-    side?: "top" | "bottom" | "left" | "right";
-    /** Whether to display the top-right close (X) button (default: true) */
-    showCloseButton?: boolean;
-    /** Whether clicking outside closes the sheet (default: true) */
-    closeOnOutsideClick?: boolean;
-    /** Whether to apply background backdrop blur (default: true) */
-    blur?: boolean;
-    class?: string;
-    children?: JSX.Element;
-  };
+    VariantProps<typeof sheetVariants> & {
+      side?: "top" | "bottom" | "left" | "right";
+      showCloseButton?: boolean;
+      closeOnOutsideClick?: boolean;
+      blur?: boolean;
+      class?: string;
+      children?: JSX.Element;
+    };
 
 /**
- * Main sheet container with smooth CSS keyframe slide animations.
+ * Slide-out panel container with ScrollArea and animation support.
  */
 export const SheetContent = <T extends ValidComponent = "div">(
   props: PolymorphicProps<T, SheetContentProps<T>>
 ) => {
   const [local, rest] = splitProps(props as SheetContentProps, [
+    "class",
+    "children",
     "side",
     "showCloseButton",
     "closeOnOutsideClick",
     "blur",
-    "class",
-    "children",
     "onPointerDownOutside",
     "onInteractOutside",
   ]);
@@ -126,26 +123,28 @@ export const SheetContent = <T extends ValidComponent = "div">(
   };
 
   return (
-    <DialogPrimitive.Portal>
+    <SheetPortal>
       <style>{sheetStyles}</style>
       <SheetOverlay blur={local.blur} />
       <DialogPrimitive.Content
         onPointerDownOutside={handlePointerDownOutside}
         onInteractOutside={handleInteractOutside}
-        class={cn(sheetVariants({ side: side() }), local.class)}
+        class={cn(sheetVariants({ side: side() }), "p-0", local.class)}
         {...(rest as any)}
       >
-        {local.children}
+        <ScrollArea class="h-full w-full">
+          <div class="p-6 space-y-4">
+            {local.children}
+          </div>
+        </ScrollArea>
         <Show when={local.showCloseButton !== false}>
-          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none cursor-pointer">
-            <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="M6 18L18 6M6 6l12 12" />
-            </svg>
+          <DialogPrimitive.CloseButton class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none cursor-pointer z-50">
+            <X class="h-4 w-4" />
             <span class="sr-only">Close</span>
           </DialogPrimitive.CloseButton>
         </Show>
       </DialogPrimitive.Content>
-    </DialogPrimitive.Portal>
+    </SheetPortal>
   );
 };
 
@@ -173,44 +172,44 @@ export const SheetFooter: Component<SheetFooterProps> = (props) => {
 
   return (
     <div
-      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", local.class)}
+      class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 pt-4", local.class)}
       {...rest}
     />
   );
 };
 
-export type SheetTitleProps<T extends ValidComponent = "h2"> =
-  DialogPrimitive.DialogTitleProps<T> & {
-    class?: string;
-  };
+export interface SheetTitleProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-export const SheetTitle = <T extends ValidComponent = "h2">(
-  props: PolymorphicProps<T, SheetTitleProps<T>>
-) => {
-  const [local, rest] = splitProps(props as SheetTitleProps, ["class"]);
+export const SheetTitle: Component<SheetTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Title
       class={cn("text-lg font-semibold text-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Title>
   );
 };
 
-export type SheetDescriptionProps<T extends ValidComponent = "p"> =
-  DialogPrimitive.DialogDescriptionProps<T> & {
-    class?: string;
-  };
+export interface SheetDescriptionProps {
+  class?: string;
+  children?: JSX.Element;
+}
 
-export const SheetDescription = <T extends ValidComponent = "p">(
-  props: PolymorphicProps<T, SheetDescriptionProps<T>>
-) => {
-  const [local, rest] = splitProps(props as SheetDescriptionProps, ["class"]);
+export const SheetDescription: Component<SheetDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
 
   return (
     <DialogPrimitive.Description
       class={cn("text-sm text-muted-foreground", local.class)}
-      {...(rest as any)}
-    />
+      {...rest}
+    >
+      {local.children}
+    </DialogPrimitive.Description>
   );
 };

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

@@ -0,0 +1,41 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-2 border-current border-r-transparent text-primary",
+  {
+    variants: {
+      size: {
+        sm: "size-3",
+        default: "size-4",
+        lg: "size-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+export interface SpinnerProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "role">,
+    VariantProps<typeof spinnerVariants> {
+  /** Accessible text announced while the spinner is active. */
+  label?: string;
+  class?: string;
+}
+
+/** A compact, accessible loading indicator for async UI states. */
+export const Spinner: Component<SpinnerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["size", "label", "class"]);
+
+  return (
+    <span
+      role="status"
+      aria-label={local.label || "Loading"}
+      class={cn(spinnerVariants({ size: local.size }), local.class)}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,119 @@
+import { Show, splitProps, type Component, type JSX } from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+export const statusVariants = cva(
+  "inline-flex items-center gap-2 text-sm font-medium text-foreground",
+  {
+    variants: {
+      variant: {
+        neutral: "text-muted-foreground",
+        success: "text-emerald-700 dark:text-emerald-400",
+        warning: "text-amber-700 dark:text-amber-400",
+        error: "text-destructive",
+        info: "text-blue-700 dark:text-blue-400",
+      },
+      size: {
+        sm: "text-xs gap-1.5",
+        default: "text-sm gap-2",
+      },
+      bordered: {
+        true: "rounded-md border px-2 py-1",
+        false: "",
+      },
+      borderVariant: {
+        neutral: "border-muted-foreground/30",
+        success: "border-emerald-500/30",
+        warning: "border-amber-500/30",
+        error: "border-destructive/30",
+        info: "border-blue-500/30",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "default",
+      bordered: false,
+      borderVariant: "neutral",
+    },
+  }
+);
+
+export const statusDotVariants = cva("size-2 shrink-0 rounded-lg", {
+  variants: {
+    variant: {
+      neutral: "bg-muted-foreground",
+      success: "bg-emerald-500",
+      warning: "bg-amber-500",
+      error: "bg-destructive",
+      info: "bg-blue-500",
+    },
+    size: {
+      sm: "size-1.5",
+      default: "size-2",
+    },
+    animation: {
+      none: "",
+      pulse: "animate-pulse",
+      ping: "",
+    },
+  },
+  defaultVariants: {
+    variant: "neutral",
+    size: "default",
+    animation: "none",
+  },
+});
+
+export interface StatusProps
+  extends JSX.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statusVariants> {
+  class?: string;
+  animation?: "none" | "pulse" | "ping";
+}
+
+/** A compact status indicator combining a semantic color dot and label. */
+export const Status: Component<StatusProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "children",
+    "animation",
+    "bordered",
+  ]);
+
+  return (
+    <span
+      role="status"
+      class={cn(
+        statusVariants({
+          variant: local.variant,
+          size: local.size,
+          bordered: local.bordered,
+          borderVariant: local.variant,
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="relative flex shrink-0" aria-hidden="true">
+        <Show when={local.animation === "ping"}>
+          <span
+            class={cn(
+              "absolute inline-flex size-full animate-ping rounded-lg opacity-75",
+              statusDotVariants({ variant: local.variant, size: local.size })
+            )}
+          />
+        </Show>
+        <span
+          class={statusDotVariants({
+            variant: local.variant,
+            size: local.size,
+            animation: local.animation === "ping" ? "none" : local.animation,
+          })}
+        />
+      </span>
+      {local.children}
+    </span>
+  );
+};