@nikala-ui/core 0.10.1-nightly.4e09f2a → 0.11.0

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

@@ -0,0 +1,350 @@
+import {
+  createContext,
+  useContext,
+  splitProps,
+  type Component,
+  type JSX,
+  type Accessor,
+} from "solid-js";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+/* --- Timeline Context --- */
+interface TimelineContextValue {
+  orientation: Accessor<"vertical" | "horizontal">;
+  align: Accessor<"left" | "right" | "alternate">;
+  size: Accessor<"sm" | "default" | "lg">;
+}
+
+const TimelineContext = createContext<TimelineContextValue>();
+
+export interface TimelineProps extends JSX.HTMLAttributes<HTMLOListElement> {
+  /** Layout orientation of the timeline */
+  orientation?: "vertical" | "horizontal";
+  /** Alignment of content relative to the timeline line */
+  align?: "left" | "right" | "alternate";
+  /** Sizing of dots and spacing */
+  size?: "sm" | "default" | "lg";
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Root container for chronological timeline event sequences.
+ */
+export const Timeline: Component<TimelineProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "orientation",
+    "align",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  const orientation = () => local.orientation ?? "vertical";
+  const align = () => local.align ?? "left";
+  const size = () => local.size ?? "default";
+
+  const contextValue: TimelineContextValue = {
+    orientation,
+    align,
+    size,
+  };
+
+  return (
+    <TimelineContext.Provider value={contextValue}>
+      <ol
+        role="list"
+        data-orientation={orientation()}
+        data-align={align()}
+        class={cn(
+          "relative flex",
+          orientation() === "vertical"
+            ? "flex-col w-full"
+            : "flex-row w-full items-start",
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </ol>
+    </TimelineContext.Provider>
+  );
+};
+
+/* --- Timeline Item --- */
+export interface TimelineItemProps extends JSX.HTMLAttributes<HTMLLIElement> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Individual event row container in the timeline.
+ */
+export const TimelineItem: Component<TimelineItemProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <li
+      class={cn(
+        "group relative flex",
+        isVertical()
+          ? "min-h-[3.5rem] w-full items-start"
+          : "flex-1 min-w-0 flex-col items-start",
+        isVertical() && align() === "right" && "flex-row-reverse",
+        isVertical() && align() === "alternate" && "[&:nth-child(even)]:flex-row-reverse",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </li>
+  );
+};
+
+/* --- Timeline Separator (Dot + Connector wrapper) --- */
+export interface TimelineSeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+export const TimelineSeparator: Component<TimelineSeparatorProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class", "children"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "flex shrink-0 relative",
+        isVertical()
+          ? "flex-col items-center self-stretch"
+          : "flex-row items-center w-full",
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Timeline Point / Dot --- */
+export const timelinePointVariants = cva(
+  "relative z-10 flex shrink-0 items-center justify-center rounded-lg font-medium transition-all shadow-xs",
+  {
+    variants: {
+      variant: {
+        default: "border-2 bg-background",
+        solid: "text-primary-foreground",
+        subtle: "bg-muted text-muted-foreground",
+        outline: "border-2 border-border bg-card text-foreground",
+      },
+      status: {
+        default: "border-border text-foreground bg-card",
+        primary: "border-primary bg-primary text-primary-foreground",
+        success: "border-emerald-500 bg-emerald-500 text-white dark:border-emerald-400 dark:bg-emerald-400",
+        warning: "border-amber-500 bg-amber-500 text-white dark:border-amber-400 dark:bg-amber-400",
+        destructive: "border-destructive bg-destructive text-destructive-foreground",
+        muted: "border-border/60 bg-muted text-muted-foreground",
+      },
+      size: {
+        sm: "size-5 text-[10px] [&_svg]:size-3",
+        default: "size-8 text-xs [&_svg]:size-4",
+        lg: "size-10 text-sm [&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      status: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface TimelinePointProps
+  extends JSX.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof timelinePointVariants> {
+  class?: string;
+  children?: JSX.Element;
+}
+
+/**
+ * Status indicator node or icon container in the timeline separator.
+ */
+export const TimelinePoint: Component<TimelinePointProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "status",
+    "size",
+    "class",
+    "children",
+  ]);
+
+  const size = () => local.size || context?.size() || "default";
+
+  return (
+    <div
+      class={cn(
+        timelinePointVariants({
+          variant: local.variant,
+          status: local.status,
+          size: size(),
+        }),
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  );
+};
+
+/* --- Timeline Connector (Line track) --- */
+export interface TimelineConnectorProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  dashed?: boolean;
+  class?: string;
+}
+
+/**
+ * Line track connecting sequential timeline items.
+ */
+export const TimelineConnector: Component<TimelineConnectorProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["dashed", "class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+
+  return (
+    <div
+      aria-hidden="true"
+      class={cn(
+        "transition-colors group-last:hidden",
+        isVertical()
+          ? "w-0.5 flex-1 min-h-6 my-1 bg-border"
+          : "h-0.5 flex-1 min-w-4 mx-2 bg-border",
+        local.dashed && (
+          isVertical()
+            ? "border-l-2 border-dashed border-border bg-transparent w-0"
+            : "border-t-2 border-dashed border-border bg-transparent h-0"
+        ),
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Content (Event Details) --- */
+export interface TimelineContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Primary container holding the description, title, and body for a timeline event.
+ */
+export const TimelineContent: Component<TimelineContentProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col",
+        isVertical() ? "flex-1 pb-6 pt-0.5" : "pt-2 pr-2 text-left",
+        isVertical() && align() === "left" && "text-left pl-3.5 pr-0",
+        isVertical() && align() === "right" && "text-right pr-3.5 pl-0",
+        isVertical() && align() === "alternate" && "text-left pl-3.5 group-even:text-right group-even:pr-3.5 group-even:pl-0",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Opposite Content --- */
+export interface TimelineOppositeContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string;
+}
+
+/**
+ * Content placed on the opposite side of the timeline separator (e.g. timestamps in alternate layouts).
+ */
+export const TimelineOppositeContent: Component<TimelineOppositeContentProps> = (props) => {
+  const context = useContext(TimelineContext);
+  const [local, rest] = splitProps(props, ["class"]);
+
+  const isVertical = () => !context || context.orientation() === "vertical";
+  const align = () => context?.align() ?? "left";
+
+  return (
+    <div
+      class={cn(
+        "flex flex-col text-xs text-muted-foreground",
+        align() !== "alternate" && "hidden",
+        isVertical()
+          ? "flex-1 pb-6 pt-1 text-right pr-3.5 group-even:text-left group-even:pl-3.5 group-even:pr-0"
+          : "pb-1 pr-2",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Title --- */
+export interface TimelineTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  class?: string;
+}
+
+export const TimelineTitle: Component<TimelineTitleProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <h4
+      class={cn("text-sm font-semibold tracking-tight text-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Description --- */
+export interface TimelineDescriptionProps extends JSX.HTMLAttributes<HTMLParagraphElement> {
+  class?: string;
+}
+
+export const TimelineDescription: Component<TimelineDescriptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <p
+      class={cn("mt-1 text-sm text-muted-foreground", local.class)}
+      {...rest}
+    />
+  );
+};
+
+/* --- Timeline Time --- */
+export interface TimelineTimeProps extends JSX.HTMLAttributes<HTMLTimeElement> {
+  class?: string;
+}
+
+export const TimelineTime: Component<TimelineTimeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <time
+      class={cn("text-xs font-medium text-muted-foreground/80", local.class)}
+      {...rest}
+    />
+  );
+};