@nikala-ui/core 0.10.1 → 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/table.tsx

@@ -0,0 +1,160 @@
+import { splitProps, type Component, type JSX } from "solid-js";
+import { cn } from "@/lib/cn";
+
+export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  class?: string;
+}
+
+/**
+ * Root Table container component wrapped in a responsive scroll container.
+ */
+export const Table: Component<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <div class="relative w-full overflow-auto">
+      <table
+        class={cn("w-full caption-bottom text-sm", local.class)}
+        {...rest}
+      />
+    </div>
+  );
+};
+
+export interface TableHeaderProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Header section wrapper for the Table component.
+ */
+export const TableHeader: Component<TableHeaderProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <thead
+      class={cn("[&_tr]:border-b border-border", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableBodyProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Main body section wrapper for the Table component.
+ */
+export const TableBody: Component<TableBodyProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tbody
+      class={cn("[&_tr:last-child]:border-0", local.class)}
+      {...rest}
+    />
+  );
+};
+
+export interface TableFooterProps extends JSX.HTMLAttributes<HTMLTableSectionElement> {
+  class?: string;
+}
+
+/**
+ * Footer section wrapper for the Table component.
+ */
+export const TableFooter: Component<TableFooterProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tfoot
+      class={cn(
+        "border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableRowProps extends JSX.HTMLAttributes<HTMLTableRowElement> {
+  class?: string;
+}
+
+/**
+ * Table row component with hover highlight states.
+ */
+export const TableRow: Component<TableRowProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <tr
+      class={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableHeadProps extends JSX.ThHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Header cell component for table columns.
+ */
+export const TableHead: Component<TableHeadProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <th
+      class={cn(
+        "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCellProps extends JSX.TdHTMLAttributes<HTMLTableCellElement> {
+  class?: string;
+}
+
+/**
+ * Standard data cell component for table rows.
+ */
+export const TableCell: Component<TableCellProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <td
+      class={cn(
+        "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class
+      )}
+      {...rest}
+    />
+  );
+};
+
+export interface TableCaptionProps extends JSX.HTMLAttributes<HTMLTableCaptionElement> {
+  class?: string;
+}
+
+/**
+ * Accessible table caption for describing table contents.
+ */
+export const TableCaption: Component<TableCaptionProps> = (props) => {
+  const [local, rest] = splitProps(props, ["class"]);
+
+  return (
+    <caption
+      class={cn("mt-4 text-xs text-muted-foreground pb-2", local.class)}
+      {...rest}
+    />
+  );
+};