@viliha/vui-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 VILIHA PTE. LTD.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@viliha/vui-ui",
+  "version": "1.0.0",
+  "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
+  "license": "MIT",
+  "author": "Suman Bonakurthi",
+  "homepage": "https://github.com/myviliha/vui-starter/tree/main/packages/ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/myviliha/vui-starter.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/myviliha/vui-starter/issues"
+  },
+  "keywords": [
+    "react",
+    "tailwind",
+    "tailwindcss",
+    "shadcn",
+    "radix",
+    "admin",
+    "dashboard",
+    "crm",
+    "ui",
+    "components",
+    "design-system"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "exports": {
+    "./theme.css": "./src/theme.css",
+    "./utils": "./src/utils.ts",
+    "./*": "./src/*.tsx"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@radix-ui/react-icons": "^1.3.2",
+    "clsx": "^2.1.1",
+    "recharts": "^3.9.2",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.15.3",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "eslint": "^9.39.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "5.9.2",
+    "vitest": "^4.1.10",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/avatar.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export const Avatar = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "relative flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-md",
+      className,
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = "Avatar";
+
+export const AvatarFallback = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex size-full items-center justify-center bg-muted font-medium text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = "AvatarFallback";

package/src/badge.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "outline"
+  | "muted"
+  | "success"
+  | "warning"
+  | "destructive";
+
+const VARIANTS: Record<BadgeVariant, string> = {
+  default: "border-transparent bg-primary text-primary-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  outline: "border-border text-foreground",
+  muted: "border-transparent bg-muted text-muted-foreground",
+  success:
+    "border-transparent bg-emerald-50 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400",
+  warning:
+    "border-transparent bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-400",
+  destructive:
+    "border-transparent bg-destructive/10 text-destructive dark:bg-destructive/20",
+};
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 font-normal",
+        VARIANTS[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/button.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+type ButtonVariant =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "outline"
+  | "ghost"
+  | "link"
+  | "destructive";
+type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+const BASE =
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
+
+// Standard button: white background + border; on hover only the icon activates
+// (muted → foreground). Shared by default/secondary/outline for one consistent look.
+const NEUTRAL =
+  "border border-border bg-background text-foreground [&_svg]:text-muted-foreground hover:[&_svg]:text-foreground";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  default: NEUTRAL,
+  primary:
+    "border border-transparent bg-[var(--button-primary)] text-[var(--button-primary-foreground)] shadow-[var(--button-shadow)] hover:bg-[var(--button-primary-hover)] [&_svg]:border-white/30",
+  secondary: NEUTRAL,
+  outline: NEUTRAL,
+  ghost: "hover:bg-accent hover:text-accent-foreground",
+  link: "text-primary underline-offset-4 hover:underline",
+  destructive:
+    "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  default: "h-8 px-3",
+  sm: "h-7 rounded-sm px-2.5",
+  lg: "h-9 px-4",
+  icon: "size-8",
+};
+
+export function buttonVariants({
+  variant = "default",
+  size = "default",
+  className,
+}: {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+} = {}): string {
+  return cn(BASE, VARIANTS[variant], SIZES[size], className);
+}
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      className={buttonVariants({ variant, size, className })}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

package/src/card.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-border bg-card text-card-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col gap-1 px-5 pb-3 pt-5", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("px-5 pb-5", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center px-5 pb-5", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

package/src/chart.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import { ResponsiveContainer, Tooltip, Legend } from "recharts";
+
+import { cn } from "./utils";
+
+/**
+ * Themed Recharts wrapper for the Vui design system.
+ *
+ * ponytail: a compact token-driven wrapper, not the full shadcn chart.tsx —
+ * covers container + tooltip + legend for area/bar/line/pie demos. Swap in the
+ * upstream shadcn `chart` component if you need indicator variants / nameKey.
+ *
+ * Each `config` entry maps a data key to a label + color. The container exposes
+ * every color as a `--color-<key>` CSS variable so series can reference
+ * `stroke="var(--color-revenue)"` and stay in sync with the theme tokens
+ * (`--chart-1 … --chart-5`).
+ */
+export type ChartConfig = Record<string, { label: string; color: string }>;
+
+const ChartConfigContext = React.createContext<ChartConfig>({});
+
+export function ChartContainer({
+  config,
+  className,
+  children,
+}: {
+  config: ChartConfig;
+  className?: string;
+  /** A single Recharts chart element (AreaChart, BarChart, PieChart, …). */
+  children: React.ReactElement;
+}) {
+  const cssVars = Object.fromEntries(
+    Object.entries(config).map(([key, v]) => [`--color-${key}`, v.color]),
+  ) as React.CSSProperties;
+
+  return (
+    <ChartConfigContext.Provider value={config}>
+      <div
+        style={cssVars}
+        className={cn(
+          "aspect-video w-full text-xs [&_.recharts-cartesian-grid_line]:stroke-border/60 [&_.recharts-text]:fill-muted-foreground",
+          className,
+        )}
+      >
+        <ResponsiveContainer width="100%" height="100%">
+          {children}
+        </ResponsiveContainer>
+      </div>
+    </ChartConfigContext.Provider>
+  );
+}
+
+type TooltipEntry = {
+  name?: string;
+  value?: number | string;
+  color?: string;
+  dataKey?: string | number;
+};
+
+/** Styled tooltip. Pass as `content={<ChartTooltipContent />}` to a `<Tooltip>`. */
+export function ChartTooltipContent({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: TooltipEntry[];
+  label?: string | number;
+}) {
+  const config = React.useContext(ChartConfigContext);
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="min-w-32 rounded-md border border-border bg-popover px-2.5 py-2 text-popover-foreground shadow-md">
+      {label != null && (
+        <p className="mb-1.5 font-medium">{String(label)}</p>
+      )}
+      <div className="space-y-1">
+        {payload.map((item, i) => {
+          // Recharts fills `name` with the series `name` (defaults to dataKey)
+          // for cartesian charts, and the slice's nameKey for pies.
+          const key = String(item.name ?? item.dataKey ?? i);
+          const conf = config[key];
+          return (
+            <div
+              key={key}
+              className="flex items-center justify-between gap-4 text-muted-foreground"
+            >
+              <span className="flex items-center gap-1.5">
+                <span
+                  className="size-2.5 shrink-0 rounded-[3px]"
+                  style={{ background: item.color ?? conf?.color }}
+                />
+                {conf?.label ?? item.name ?? key}
+              </span>
+              <span className="font-mono font-medium text-foreground">
+                {typeof item.value === "number"
+                  ? item.value.toLocaleString()
+                  : item.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+type LegendEntry = { value?: string; color?: string; dataKey?: string | number };
+
+/** Styled legend. Pass as `content={<ChartLegendContent />}` to a `<Legend>`. */
+export function ChartLegendContent({ payload }: { payload?: LegendEntry[] }) {
+  const config = React.useContext(ChartConfigContext);
+  if (!payload?.length) return null;
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-4 pt-3">
+      {payload.map((item, i) => {
+        // Legend payload uses `value` for the label (series name / pie slice
+        // name); a pie gives every entry the same `dataKey` ("value"), so key
+        // off `value` (with index as a guaranteed-unique fallback).
+        const key = String(item.value ?? item.dataKey ?? i);
+        const conf = config[key];
+        return (
+          <span
+            key={`${key}-${i}`}
+            className="flex items-center gap-1.5 text-muted-foreground"
+          >
+            <span
+              className="size-2.5 shrink-0 rounded-[3px]"
+              style={{ background: item.color ?? conf?.color }}
+            />
+            {conf?.label ?? item.value ?? key}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Re-export the raw Recharts `Tooltip`/`Legend` so consumers get them from one place. */
+export { Tooltip as ChartTooltip, Legend as ChartLegend };

package/src/checkbox.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+export const Checkbox = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, ...props }, ref) => (
+  <input
+    ref={ref}
+    type="checkbox"
+    className={cn(
+      "size-4 shrink-0 cursor-pointer rounded border-input accent-[var(--button-primary)]",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      className,
+    )}
+    {...props}
+  />
+));
+Checkbox.displayName = "Checkbox";

package/src/code.tsx

@@ -0,0 +1,11 @@
+import { type JSX } from "react";
+
+export function Code({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): JSX.Element {
+  return <code className={className}>{children}</code>;
+}

package/src/confirm-dialog.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { cn } from "./utils";
+import { Button } from "./button";
+import {
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+export interface ConfirmDialogProps {
+  open: boolean;
+  title: string;
+  description?: React.ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Style the confirm button as a destructive (red) action. */
+  destructive?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+/** Centered modal confirmation (e.g. before deleting). Backdrop dims the page;
+    Escape / backdrop click / Cancel dismiss it. */
+export function ConfirmDialog({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive,
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  // Built on the shared Dialog primitive so it stays in lockstep with the
+  // header / body / footer standard.
+  return (
+    <Dialog open={open} onClose={onCancel} label={title} className="max-w-sm">
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+      </DialogHeader>
+      {description && (
+        <DialogBody className="text-muted-foreground">{description}</DialogBody>
+      )}
+      <DialogFooter>
+        <Button onClick={onCancel}>{cancelLabel}</Button>
+        <Button
+          variant={destructive ? "destructive" : "primary"}
+          onClick={onConfirm}
+          className={cn(destructive && "[&_svg]:border-white/30")}
+        >
+          {confirmLabel}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}

package/src/dialog.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "./utils";
+
+/**
+ * Sectioned modal dialog — the theme standard. It provides the shell (centered
+ * panel, dimmed backdrop, entrance animation, Escape / backdrop-click to close)
+ * and three bordered placeholders — `DialogHeader`, `DialogBody`, `DialogFooter`
+ * — so a new dialog only needs to pass content into each. See `ConfirmDialog`
+ * for a ready-made example built on top of these.
+ *
+ *   <Dialog open={open} onClose={close} label="Invite">
+ *     <DialogHeader><DialogTitle>Invite teammate</DialogTitle></DialogHeader>
+ *     <DialogBody>…form…</DialogBody>
+ *     <DialogFooter><Button onClick={close}>Cancel</Button>…</DialogFooter>
+ *   </Dialog>
+ */
+export function Dialog({
+  open,
+  onClose,
+  label,
+  className,
+  children,
+  /** Allow Escape / backdrop click to dismiss (default true). */
+  dismissible = true,
+}: {
+  open: boolean;
+  onClose: () => void;
+  /** Accessible name for the dialog (aria-label). */
+  label?: string;
+  className?: string;
+  children: React.ReactNode;
+  dismissible?: boolean;
+}) {
+  React.useEffect(() => {
+    if (!open || !dismissible) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, dismissible, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="vui-overlay-in fixed inset-0 z-[70] flex items-center justify-center bg-foreground/25 p-4"
+      onClick={dismissible ? onClose : undefined}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        onClick={(e) => e.stopPropagation()}
+        style={{ ["--vui-pop-origin" as string]: "center" }}
+        className={cn(
+          "vui-pop-in w-full max-w-md overflow-hidden rounded-lg border border-border bg-background shadow-xl",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/** Bordered header section. */
+export function DialogHeader({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className={cn("border-b border-border px-5 py-3", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogTitle({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <h2 className={cn("text-base font-semibold tracking-tight", className)}>
+      {children}
+    </h2>
+  );
+}
+
+/** Scrollable content section (capped so long content scrolls, not the page). */
+export function DialogBody({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "max-h-[70vh] overflow-y-auto px-5 py-4 text-sm leading-relaxed",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** Bordered footer section — right-aligned actions by default. */
+export function DialogFooter({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-end gap-2 border-t border-border px-5 py-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}