@blenx-dev/components 0.0.0

package/dist/utils/ve-style.utils.js

@@ -0,0 +1,21 @@
+import { baseSprinkles } from "./sprinkles.css.js";
+//#region src/utils/ve-style.utils.ts
+var BASE_SPRINKLE_KEYS = [
+	...baseSprinkles.properties,
+	"withBorder",
+	"fullWidth"
+];
+var BASE_SPRINKLE_KEYS_SET = new Set(BASE_SPRINKLE_KEYS);
+function applyBaseSprinkles(props) {
+	const sprinkleProps = {};
+	const htmlProps = {};
+	for (const [key, value] of Object.entries(props)) if (key === "fullWidth" && props[key]) sprinkleProps.width = "full";
+	else if (key === "withBorder" && props[key]) sprinkleProps.borderColor = "default";
+	else if (BASE_SPRINKLE_KEYS_SET.has(key)) sprinkleProps[key] = value;
+	else htmlProps[key] = value;
+	sprinkleProps.color = sprinkleProps.color || "default";
+	sprinkleProps.backgroundColor = sprinkleProps.backgroundColor || "default";
+	return [baseSprinkles(sprinkleProps), htmlProps];
+}
+//#endregion
+export { applyBaseSprinkles };

package/package.build.json

@@ -0,0 +1,39 @@
+{
+  "name": "@blenx-dev/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./globals.css": "./dist/styles/globals.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@blenx-dev/theme": "^1.0.0",
+    "@base-ui/react": "^1.0.0",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "clsx": "^2.1.1",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@blenx-dev/components",
+  "version": "0.0.0",
+  "type": "module",
+  "types": "./src/index.ts",
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": {
+      "types": "./src/lib/*",
+      "default": "./src/lib/*"
+    },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
+    },
+    "./components/*": {
+      "types": "./src/components/*",
+      "default": "./src/components/*"
+    },
+    "./utils/*": {
+      "types": "./src/utils/*",
+      "default": "./src/utils/*"
+    },
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit",
+    "build": "vite build && bun scripts/generate-package.ts"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@blenx-dev/theme": "0.0.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@tanstack/react-table": "^8.21.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "clsx": "^2.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "shadcn": "^4.11.0",
+    "sonner": "^2.0.5",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@blenx-dev/config": "0.0.0",
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "fs-extra": "^11.3.5",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^6"
+  }
+}

package/scripts/generate-api.ts

@@ -0,0 +1,183 @@
+import { existsSync, mkdirSync, readdirSync, writeFileSync } from "node:fs";
+import { join, dirname, basename } from "node:path";
+import { fileURLToPath } from "node:url";
+import { withCustomConfig, type ComponentDoc, type PropItem } from "react-docgen-typescript";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// =====================
+// Paths
+// =====================
+const REPO_ROOT = dirname(__dirname);
+const UI_SRC = join(REPO_ROOT, "src");
+const COMPONENTS_DIR = join(UI_SRC, "components");
+const DATATABLE_DIR = join(UI_SRC, "DataTable");
+const OUTPUT_DIR = join(REPO_ROOT, "generated", "api");
+const TSCONFIG_PATH = join(REPO_ROOT, "tsconfig.json");
+
+// =====================
+// Types (output shape kept compatible with the old script)
+// =====================
+interface ApiProp {
+  name: string;
+  type: string;
+  optional: boolean;
+  description: string;
+  default?: string;
+  deprecated?: string;
+  since?: string;
+}
+
+interface ApiMeta {
+  name: string;
+  description: string;
+  props: ApiProp[];
+}
+
+// =====================
+// react-docgen-typescript setup
+// =====================
+// Uses the real TS compiler — correctly resolves extended interfaces,
+// generics (e.g. React.ComponentProps<'button'>), unions, and intersections.
+const parser = withCustomConfig(TSCONFIG_PATH, {
+  savePropValueAsString: true,
+  shouldExtractLiteralValuesFromEnum: true,
+  shouldRemoveUndefinedFromOptional: true,
+  // Only pull props actually declared/extended within the package —
+  // skip ones inherited purely from DOM/React internals with no JSDoc.
+  propFilter: (prop: PropItem) => {
+    if (prop.parent?.fileName.includes("node_modules/@types/react")) {
+      return !!prop.description;
+    }
+    return true;
+  },
+});
+
+// =====================
+// Discovery (unchanged from original)
+// =====================
+function findComponentDirs(dir: string): string[] {
+  if (!existsSync(dir)) return [];
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name === "node_modules" || entry.name.startsWith(".")) continue;
+    const dp = join(dir, entry.name);
+    const hasSrc = readdirSync(dp).some((f) => f.endsWith(".tsx") || f.endsWith(".ts"));
+    out.push(...(hasSrc ? [dp] : findComponentDirs(dp)));
+  }
+  return out;
+}
+
+function findMainFile(dir: string): string | null {
+  const files = readdirSync(dir);
+  const base = basename(dir);
+  const hit = files.find((f) => f === `${base}.tsx` || f === `${base}.ts`);
+  if (hit) return join(dir, hit);
+  const tsx = files.find((f) => f.endsWith(".tsx"));
+  if (tsx) return join(dir, tsx);
+  const ts = files.find((f) => f.endsWith(".ts"));
+  if (ts) return join(dir, ts);
+  return null;
+}
+
+// =====================
+// Extraction
+// =====================
+function toApiMeta(doc: ComponentDoc): ApiMeta {
+  const props: ApiProp[] = Object.values(doc.props).map((p) => {
+    const tags = p.tags ?? {};
+    const out: ApiProp = {
+      name: p.name,
+      type: p.type.name,
+      optional: !p.required,
+      description: p.description ?? "",
+    };
+    if (p.defaultValue?.value !== undefined) {
+      out.default = String(p.defaultValue.value);
+    }
+    if (typeof tags.deprecated === "string") out.deprecated = tags.deprecated;
+    if (typeof tags.since === "string") out.since = tags.since;
+    return out;
+  });
+
+  // Stable ordering — required props first, then alphabetical
+  props.sort((a, b) => {
+    if (a.optional !== b.optional) return a.optional ? 1 : -1;
+    return a.name.localeCompare(b.name);
+  });
+
+  return { name: doc.displayName, description: doc.description ?? "", props };
+}
+
+function extractApi(filePath: string): ApiMeta | null {
+  const docs = parser.parse(filePath);
+  if (!docs.length) return null;
+
+  // A file may export multiple components (rare) — prefer the one matching
+  // the folder name, otherwise take the first documented export.
+  const folderName = basename(dirname(filePath));
+  const pascal = folderName
+    .split("-")
+    .map((s) => s[0]?.toUpperCase() + s.slice(1))
+    .join("");
+
+  const match = docs.find((d) => d.displayName === pascal) ?? docs[0];
+  return toApiMeta(match);
+}
+
+// =====================
+// Main
+// =====================
+function generate() {
+  console.log("\n── Generating API Metadata ──\n");
+  if (!existsSync(OUTPUT_DIR)) mkdirSync(OUTPUT_DIR, { recursive: true });
+
+  const dirs = [...findComponentDirs(COMPONENTS_DIR), ...findComponentDirs(DATATABLE_DIR)];
+
+  let generated = 0;
+  let skipped = 0;
+
+  for (const dir of dirs) {
+    const file = findMainFile(dir);
+    if (!file) {
+      skipped++;
+      continue;
+    }
+
+    let api: ApiMeta | null = null;
+    try {
+      api = extractApi(file);
+    } catch (err) {
+      console.warn(`  ✗ ${basename(dir)} — parse error: ${(err as Error).message}`);
+      skipped++;
+      continue;
+    }
+
+    if (!api || api.props.length === 0) {
+      skipped++;
+      continue;
+    }
+
+    const out = join(OUTPUT_DIR, `${basename(dir)}.json`);
+    writeFileSync(out, JSON.stringify(api, null, 2));
+    console.log(`  ✔ ${basename(dir)}.json  (${api.props.length} props)`);
+    generated++;
+  }
+
+  console.log(`\n  Generated: ${generated}`);
+  console.log(`  Skipped:   ${skipped}`);
+  console.log(`\n✓ Complete\n`);
+
+  if (skipped > 0) {
+    console.log(
+      "  Tip: skipped components either have no <Name>Props type docgen could find,\n" +
+        "  or react-docgen-typescript failed to parse them. Run with the file path\n" +
+        "  directly through `parser.parse()` to debug a specific component.\n",
+    );
+  }
+}
+
+if (import.meta.main) {
+  generate();
+}

package/scripts/generate-package.ts

@@ -0,0 +1,99 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+const root = process.cwd();
+const dist = path.join(root, "dist");
+
+const pkg = JSON.parse(await fs.readFile(path.join(root, "package.json"), "utf8"));
+
+const exports: Record<string, unknown> = {
+  ".": {
+    types: "./index.d.ts",
+    import: "./index.js",
+  },
+};
+
+//
+// Generate exports for every component
+//
+
+const componentRoot = path.join(dist, "components");
+
+try {
+  const entries = await fs.readdir(componentRoot, {
+    withFileTypes: true,
+  });
+
+  exports["./components"] = {
+    types: "./components/index.d.ts",
+    import: "./components/index.js",
+  };
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+
+    const component = entry.name;
+
+    exports[`./${component}`] = {
+      types: `./components/${component}/index.d.ts`,
+      import: `./components/${component}/index.js`,
+    };
+  }
+} catch {}
+
+//
+// utils
+//
+
+// const utilsRoot = path.join(dist, "utils");
+
+// try {
+//   const entries = await fs.readdir(utilsRoot);
+
+//   for (const file of entries) {
+//     if (!file.endsWith(".js")) continue;
+
+//     const name = file.replace(".js", "");
+
+//     exports[`./utils/${name}`] = {
+//       types: `./utils/${name}.d.ts`,
+//       import: `./utils/${name}.js`,
+//     };
+//   }
+// } catch {}
+
+//
+// styles
+//
+
+try {
+  await fs.access(path.join(dist, "assets", "ui.css"));
+  exports["./globals.css"] = "./assets/ui.css";
+} catch {}
+
+const publishPackage = {
+  name: pkg.name,
+  version: pkg.version,
+  description: pkg.description,
+  license: pkg.license,
+  repository: pkg.repository,
+  homepage: pkg.homepage,
+  bugs: pkg.bugs,
+  keywords: pkg.keywords,
+
+  type: "module",
+
+  files: ["**/*"],
+
+  sideEffects: ["**/*.css"],
+
+  exports,
+
+  peerDependencies: pkg.peerDependencies,
+
+  dependencies: pkg.dependencies,
+};
+
+await fs.writeFile(path.join(dist, "package.json"), JSON.stringify(publishPackage, null, 2));
+
+console.log("✓ package.json generated");

package/src/DataTable/data-table-column-toggle.tsx

@@ -0,0 +1,73 @@
+import { themeContract } from "@blenx-dev/theme/contract";
+import { ListIcon } from "@phosphor-icons/react";
+import type { Table } from "@tanstack/react-table";
+import * as styles from "./data-table.css";
+import { Button, Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "../components";
+
+interface DataTableColumnToggleProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableColumnToggle<TData>({ table }: DataTableColumnToggleProps<TData>) {
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+
+  if (columns.length === 0) return null;
+
+  const allVisible = columns.every((column) => column.getIsVisible());
+  const someVisible = columns.some((column) => column.getIsVisible());
+
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline" size="small" />}>
+        <ListIcon size={16} />
+        <span>Columns</span>
+      </MenuTrigger>
+      <MenuPopup align="end">
+        <MenuItem
+          onClick={() => {
+            for (const column of columns) {
+              column.toggleVisibility(allVisible);
+            }
+          }}
+        >
+          <span className={styles.deselectLabel}>{allVisible ? "Deselect all" : "Select all"}</span>
+          <span className={allVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
+            {allVisible && <CheckMark />}
+            {!allVisible && someVisible && <div className={styles.partial} />}
+          </span>
+        </MenuItem>
+        <MenuSeparator />
+        {columns.map((column) => {
+          const label = column.columnDef.header?.toString() ?? column.id;
+          const isVisible = column.getIsVisible();
+          return (
+            <MenuItem key={column.id} onClick={() => column.toggleVisibility(!isVisible)}>
+              <span className={styles.itemLabel}>{label}</span>
+              <span className={isVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
+                {isVisible && <CheckMark />}
+              </span>
+            </MenuItem>
+          );
+        })}
+      </MenuPopup>
+    </Menu>
+  );
+}
+
+function CheckMark() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={themeContract.contentOnPrimary}
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <title>Visible</title>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}

package/src/DataTable/data-table-empty.tsx

@@ -0,0 +1,27 @@
+import { FolderOpenIcon } from "@phosphor-icons/react";
+import * as styles from "./data-table.css";
+
+interface DataTableEmptyProps {
+  message?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function DataTableEmpty({
+  message = "No results found",
+  icon,
+  action,
+}: DataTableEmptyProps) {
+  return (
+    <output aria-label={message} className={styles.emptyContainer}>
+      {icon && <div className={styles.iconWrap}>{icon}</div>}
+      {!icon && (
+        <div className={styles.iconWrap}>
+          <FolderOpenIcon size={48} />
+        </div>
+      )}
+      <p className={styles.message}>{message}</p>
+      {action && <div className={styles.actionWrap}>{action}</div>}
+    </output>
+  );
+}

package/src/DataTable/data-table-error.tsx

@@ -0,0 +1,25 @@
+import { WarningCircleIcon } from "@phosphor-icons/react";
+import * as styles from "./data-table.css";
+import { Button } from "../components";
+
+interface DataTableErrorProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export function DataTableError({
+  message = "Something went wrong while loading data",
+  onRetry,
+}: DataTableErrorProps) {
+  return (
+    <div role="alert" aria-label={message} className={styles.errorContainer}>
+      <WarningCircleIcon size={48} />
+      <p className={styles.errorMessage}>{message}</p>
+      {onRetry && (
+        <Button variant="outline" size="small" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/DataTable/data-table-infinite-loader.tsx

@@ -0,0 +1,73 @@
+import { Button, Spinner } from "../components";
+import type { InfiniteScrollConfig } from "./types";
+import { useInfiniteScroll } from "./use-infinite-scroll";
+import * as styles from "./data-table.css";
+
+interface DataTableInfiniteLoaderProps {
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetching?: boolean;
+  config?: InfiniteScrollConfig;
+}
+
+export function DataTableInfiniteLoader({
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetching,
+  config,
+}: DataTableInfiniteLoaderProps) {
+  const isAuto = config?.mode === "auto";
+  const loadingText = config?.loadingText ?? "Loading...";
+  const noMoreText = config?.noMoreText ?? "No more results";
+
+  const { sentinelRef } = useInfiniteScroll({
+    hasNextPage,
+    isFetchingNextPage: isFetchingNextPage || Boolean(isFetching),
+    fetchNextPage,
+    rootMargin: config?.rootMargin,
+    threshold: config?.threshold,
+    enabled: isAuto,
+  });
+
+  if (isAuto) {
+    return (
+      <div
+        ref={sentinelRef}
+        aria-label={isFetchingNextPage ? loadingText : noMoreText}
+        className={styles.sentinel}
+      >
+        {isFetchingNextPage && (
+          <div className={styles.loadingInline}>
+            <Spinner />
+            <span className={styles.loaderLoadingText}>{loadingText}</span>
+          </div>
+        )}
+        {!hasNextPage && !isFetchingNextPage && <span className={styles.noMore}>{noMoreText}</span>}
+      </div>
+    );
+  }
+
+  if (!hasNextPage) {
+    return (
+      <div className={styles.center}>
+        <span className={styles.noMore}>{noMoreText}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.center}>
+      <Button
+        variant="outline"
+        onClick={fetchNextPage}
+        disabled={isFetchingNextPage}
+        loading={isFetchingNextPage}
+        aria-label={config?.loadMoreText ?? "Load more"}
+      >
+        {config?.loadMoreText ?? "Load more"}
+      </Button>
+    </div>
+  );
+}

package/src/DataTable/data-table-loading.tsx

@@ -0,0 +1,67 @@
+import { Spinner } from "../components";
+import type { TableSize } from "./types";
+import * as styles from "./data-table.css";
+
+interface DataTableLoadingProps {
+  rowCount?: number;
+  columnCount?: number;
+  size?: TableSize;
+}
+
+const ROW_HEIGHTS: Record<TableSize, number> = {
+  sm: 36,
+  md: 48,
+  lg: 60,
+};
+
+export function DataTableLoading({
+  rowCount = 5,
+  columnCount = 4,
+  size = "md",
+}: DataTableLoadingProps) {
+  const rowHeight = ROW_HEIGHTS[size];
+
+  return (
+    <output className={styles.loadingWrapper} aria-label="Loading table data">
+      <table className={styles.loadingTable}>
+        <thead>
+          <tr>
+            {Array.from({ length: columnCount }).map((_, i) => (
+              <th key={`skeleton-header-${i.toString()}`} className={styles.headerCell}>
+                <div
+                  className={styles.skeletonBar}
+                  style={{ height: 14, width: `${60 + ((i * 10) % 40)}px` }}
+                />
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rowCount }).map((_unknown, rowIdx) => (
+            <tr key={`skeleton-row-${rowIdx.toString()}`}>
+              {Array.from({ length: columnCount }).map((_, colIdx) => (
+                <td
+                  key={`skeleton-cell-${rowIdx.toString()}-${colIdx.toString()}`}
+                  className={styles.cell}
+                  style={{ height: rowHeight }}
+                >
+                  <div
+                    className={styles.skeletonBar}
+                    style={{
+                      height: 12,
+                      width: `${80 + ((rowIdx * 7 + colIdx * 13) % 20)}%`,
+                    }}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className={styles.loadingFooter}>
+        <Spinner />
+        <span className={styles.loadingText}>Loading data...</span>
+      </div>
+    </output>
+  );
+}