@nikala-ui/docs 0.12.0

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

@@ -0,0 +1,153 @@
+import { splitProps, type JSX, type ValidComponent } from "solid-js";
+import * as SliderPrimitive from "@kobalte/core/slider";
+import { cn } from "@/lib/cn";
+
+export type SliderRootProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderRootProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Root Slider component built on Kobalte primitives.
+ */
+export const Slider = <T extends ValidComponent = "div">(
+  props: SliderRootProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderRootProps, ["class", "children"]);
+
+  return (
+    <SliderPrimitive.Root
+      class={cn(
+        "relative flex w-full touch-none select-none flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:items-center",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      {local.children}
+    </SliderPrimitive.Root>
+  );
+};
+
+export type SliderTrackProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderTrackProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Slider track containing the active range fill and thumbs.
+ */
+export const SliderTrack = <T extends ValidComponent = "div">(
+  props: SliderTrackProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderTrackProps, ["class", "children"]);
+
+  return (
+    <SliderPrimitive.Track
+      class={cn(
+        "relative h-2 w-full flex items-center rounded-lg bg-secondary cursor-pointer data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-center",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <SliderFill />
+      {local.children}
+    </SliderPrimitive.Track>
+  );
+};
+
+export type SliderFillProps<T extends ValidComponent = "div"> =
+  SliderPrimitive.SliderFillProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Active range indicator fill inside SliderTrack.
+ */
+export const SliderFill = <T extends ValidComponent = "div">(
+  props: SliderFillProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderFillProps, ["class"]);
+
+  return (
+    <SliderPrimitive.Fill
+      class={cn(
+        "absolute rounded-lg bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+        local.class
+      )}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SliderThumbProps<T extends ValidComponent = "span"> =
+  SliderPrimitive.SliderThumbProps<T> & {
+    class?: string;
+    children?: JSX.Element;
+  };
+
+/**
+ * Draggable thumb handle for selecting slider values.
+ * Positioned centered on Kobalte offset coordinates using -translate-x-1/2 -translate-y-1/2.
+ */
+export const SliderThumb = <T extends ValidComponent = "span">(
+  props: SliderThumbProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderThumbProps, ["class", "children"]);
+
+  return (
+    <SliderPrimitive.Thumb
+      class={cn(
+        "block h-5 w-5 rounded-lg border-2 border-primary bg-background shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing z-10 data-[orientation=horizontal]:translate-x-0 data-[orientation=horizontal]:translate-y-0 data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-0",
+        local.class
+      )}
+      {...(rest as any)}
+    >
+      <SliderPrimitive.Input />
+      {local.children}
+    </SliderPrimitive.Thumb>
+  );
+};
+
+export type SliderLabelProps<T extends ValidComponent = "label"> =
+  SliderPrimitive.SliderLabelProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Accessible label for the Slider component.
+ */
+export const SliderLabel = <T extends ValidComponent = "label">(
+  props: SliderLabelProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderLabelProps, ["class"]);
+
+  return (
+    <SliderPrimitive.Label
+      class={cn("text-sm font-medium leading-none text-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};
+
+export type SliderValueLabelProps<T extends ValidComponent = "output"> =
+  SliderPrimitive.SliderValueLabelProps<T> & {
+    class?: string;
+  };
+
+/**
+ * Displays current formatted value label for single or dual thumbs.
+ */
+export const SliderValueLabel = <T extends ValidComponent = "output">(
+  props: SliderValueLabelProps<T>
+) => {
+  const [local, rest] = splitProps(props as SliderValueLabelProps, ["class"]);
+
+  return (
+    <SliderPrimitive.ValueLabel
+      class={cn("text-sm font-medium text-muted-foreground", local.class)}
+      {...(rest as any)}
+    />
+  );
+};

package/dist/vendor/core-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-lg 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/dist/vendor/core-src/registry/components/ui/stat.tsx

@@ -0,0 +1,245 @@
+import {
+  splitProps,
+  type JSX,
+  type ParentComponent,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { TrendingUp, TrendingDown, Minus } from "lucide-solid";
+import { cn } from "@/lib/cn";
+
+/* --- 1. Stat Group (Container Grid) --- */
+export interface StatGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+  columns?: 1 | 2 | 3 | 4 | 5;
+}
+
+export const StatGroup: ParentComponent<StatGroupProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "columns", "children"]);
+
+  const columnClass = () => {
+    switch (local.columns) {
+      case 1:
+        return "grid-cols-1";
+      case 2:
+        return "grid-cols-1 sm:grid-cols-2";
+      case 3:
+        return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+      case 5:
+        return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5";
+      case 4:
+      default:
+        return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+    }
+  };
+
+  return (
+    <div
+      class={cn("grid gap-4 sm:gap-5 w-full", columnClass(), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 2. Stat Root Card --- */
+export const statVariants = cva(
+  "relative flex flex-col justify-between rounded-lg transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "border border-border bg-card text-card-foreground p-4 sm:p-5 shadow-2xs space-y-2",
+        flat: "bg-muted/40 text-foreground p-4 sm:p-5 space-y-2",
+        bordered: "border-2 border-border bg-background text-foreground p-4 sm:p-5 space-y-2",
+        ghost: "bg-transparent text-foreground p-2 space-y-1",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface StatProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statVariants> {
+  class?: string;
+}
+
+export const Stat: ParentComponent<StatProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "variant", "children"]);
+
+  return (
+    <div
+      class={cn(statVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 3. Stat Header (Top Row) --- */
+export interface StatHeaderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const StatHeader: ParentComponent<StatHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn("flex items-center justify-between gap-2", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 4. Stat Label / Title --- */
+export interface StatLabelProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const StatLabel: ParentComponent<StatLabelProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <p
+      class={cn(
+        "text-xs sm:text-sm font-medium text-muted-foreground leading-tight tracking-tight",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </p>
+  );
+};
+
+/* --- 5. Stat Icon Wrapper --- */
+export interface StatIconProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const StatIcon: ParentComponent<StatIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex size-4 sm:size-4.5 shrink-0 items-center justify-center text-muted-foreground",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 6. Stat Value (Big Number) --- */
+export interface StatValueProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const StatValue: ParentComponent<StatValueProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "text-2xl sm:text-3xl font-bold tracking-tight text-foreground flex items-baseline gap-1 my-0.5",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- 7. Stat Unit / Currency (Prefix or Suffix) --- */
+export interface StatUnitProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  class?: string;
+}
+
+export const StatUnit: ParentComponent<StatUnitProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <span
+      class={cn("text-lg sm:text-xl font-semibold text-muted-foreground self-baseline", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </span>
+  );
+};
+
+/* --- 8. Stat Trend (Growth / Decline Indicator - No Background) --- */
+export const statTrendVariants = cva(
+  "inline-flex items-center gap-1 text-xs font-semibold select-none shrink-0 tracking-tight",
+  {
+    variants: {
+      type: {
+        up: "text-emerald-600 dark:text-emerald-400",
+        down: "text-red-600 dark:text-red-400",
+        neutral: "text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      type: "up",
+    },
+  }
+);
+
+export interface StatTrendProps
+  extends JSX.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof statTrendVariants> {
+  class?: string;
+  hideIcon?: boolean;
+}
+
+export const StatTrend: ParentComponent<StatTrendProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "type", "hideIcon", "children"]);
+
+  const Icon = () => {
+    if (local.hideIcon) return null;
+    if (local.type === "down") return <TrendingDown class="size-3.5 stroke-[2.5]" />;
+    if (local.type === "neutral") return <Minus class="size-3.5 stroke-[2.5]" />;
+    return <TrendingUp class="size-3.5 stroke-[2.5]" />;
+  };
+
+  return (
+    <span
+      class={cn(statTrendVariants({ type: local.type }), local.class)}
+      {...rest}
+    >
+      <Icon />
+      <span>{local.children}</span>
+    </span>
+  );
+};
+
+/* --- 9. Stat Help Text / Bottom Row (Between Alignment) --- */
+export interface StatHelpTextProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const StatHelpText: ParentComponent<StatHelpTextProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  return (
+    <div
+      class={cn(
+        "flex items-center justify-between gap-2 text-xs text-muted-foreground pt-1",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,121 @@
+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={cn(
+            statusDotVariants({
+              variant: local.variant,
+              size: local.size,
+              animation: local.animation === "ping" ? "none" : local.animation,
+            })
+          )}
+        />
+      </span>
+      {local.children}
+    </span>
+  );
+};