@blenx-dev/components 0.0.1 → 0.0.3

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

@@ -1,67 +0,0 @@
-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>
-  );
-}

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

@@ -1,80 +0,0 @@
-import { Button } from "../components";
-import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
-import type { Table } from "@tanstack/react-table";
-import * as styles from "./data-table.css";
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
-  const { pageIndex } = table.getState().pagination;
-  const pageCount = table.getPageCount();
-  const totalRows = table.getPrePaginationRowModel().rows.length;
-  const { pageSize } = table.getState().pagination;
-  const startRow = pageIndex * pageSize + 1;
-  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
-  const canPreviousPage = table.getCanPreviousPage();
-  const canNextPage = table.getCanNextPage();
-
-  return (
-    <nav aria-label="Pagination" className={styles.nav}>
-      <span className={styles.info}>{totalRows} results</span>
-      <div className={styles.controls}>
-        <span className={styles.range}>
-          {startRow}-{endRow} of {totalRows}
-        </span>
-        <div className={styles.buttonGroup}>
-          <Button
-            variant="outline"
-            size="small"
-            disabled={!canPreviousPage}
-            onClick={() => table.previousPage()}
-            aria-label="Previous page"
-          >
-            <CaretLeftIcon size={16} />
-          </Button>
-          {Array.from({ length: pageCount }, (_, i) => i + 1)
-            .filter((page) => {
-              const current = pageIndex + 1;
-              if (pageCount <= 7) return true;
-              if (page === 1 || page === pageCount) return true;
-              if (Math.abs(page - current) <= 1) return true;
-              return false;
-            })
-            .map((page, idx, filtered) => {
-              const pageIdx = page - 1;
-              const isActive = pageIdx === pageIndex;
-              const showGap = idx > 0 && page - filtered[idx - 1]! > 1;
-              return (
-                <div key={`page-${page.toString()}`} className={styles.pageWrap}>
-                  {showGap && <span className={styles.ellipsis}>...</span>}
-                  <Button
-                    variant={isActive ? "solid" : "ghost"}
-                    intent={isActive ? "primary" : undefined}
-                    size="small"
-                    disabled={isActive}
-                    onClick={() => table.setPageIndex(pageIdx)}
-                    aria-label={`Page ${page.toString()}`}
-                    aria-current={isActive ? "page" : undefined}
-                    className={styles.pageButton}
-                  >
-                    {page.toString()}
-                  </Button>
-                </div>
-              );
-            })}
-          <Button
-            variant="outline"
-            size="small"
-            disabled={!canNextPage}
-            onClick={() => table.nextPage()}
-            aria-label="Next page"
-          >
-            <CaretRightIcon size={16} />
-          </Button>
-        </div>
-      </div>
-    </nav>
-  );
-}

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

@@ -1,62 +0,0 @@
-import { Button, Input } from "../components";
-import type { Table } from "@tanstack/react-table";
-import { DataTableColumnToggle } from "./data-table-column-toggle";
-import type { BulkAction, TableFeatures } from "./types";
-import * as styles from "./data-table.css";
-
-interface DataTableToolbarProps<TData> {
-  table: Table<TData>;
-  features?: TableFeatures;
-  globalSearch?: string;
-  onGlobalSearchChange?: (value: string) => void;
-  customToolbar?: React.ReactNode;
-  bulkActions?: BulkAction<TData>[];
-  selectedRows: TData[];
-}
-
-export function DataTableToolbar<TData>({
-  table,
-  features,
-  globalSearch,
-  onGlobalSearchChange,
-  customToolbar,
-  bulkActions,
-  selectedRows,
-}: DataTableToolbarProps<TData>) {
-  return (
-    <div className={styles.toolbarContainer}>
-      <div className={styles.leftGroup}>
-        {features?.globalSearch && (
-          <div className={styles.searchWrap}>
-            <Input
-              size="sm"
-              placeholder="Search..."
-              value={globalSearch ?? ""}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                onGlobalSearchChange?.(e.target.value);
-              }}
-            />
-          </div>
-        )}
-        {selectedRows.length > 0 &&
-          bulkActions?.map((action, index) => (
-            <Button
-              key={`bulk-action-${index.toString()}`}
-              variant={action.variant === "destructive" ? "solid" : "outline"}
-              intent={action.variant === "destructive" ? "danger" : undefined}
-              size="small"
-              disabled={action.disabled}
-              onClick={() => action.onClick(selectedRows)}
-            >
-              {action.icon && <span>{action.icon}</span>}
-              {action.label}
-            </Button>
-          ))}
-      </div>
-      <div className={styles.rightGroup}>
-        {customToolbar}
-        {features?.columnVisibility && <DataTableColumnToggle table={table} />}
-      </div>
-    </div>
-  );
-}

package/src/DataTable/data-table.css.ts

@@ -1,421 +0,0 @@
-import { style, keyframes } from "@vanilla-extract/css";
-import { themeContract } from "@blenx-dev/theme/contract";
-import { borderRadius, fontSize, fontWeight, spacing } from "@blenx-dev/theme/tokens";
-
-const pulse = keyframes({
-  "0%, 100%": { opacity: 0.4 },
-  "50%": { opacity: 0.8 },
-});
-
-export const actionsCell = style({
-  display: "flex",
-  gap: 4,
-});
-
-export const checkbox = style({
-  cursor: "pointer",
-});
-
-export const fetchingBar = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: spacing.small,
-  gap: spacing.small,
-});
-
-export const fetchingText = style({
-  color: themeContract.contentSecondary,
-  fontSize: "13px",
-});
-
-export const tableContainer = style({
-  overflowX: "auto",
-  overflowY: "auto",
-  borderRadius: borderRadius.medium,
-  borderWidth: 1,
-  borderStyle: "solid",
-  borderColor: themeContract.border,
-  position: "relative",
-});
-
-export const table = style({
-  width: "100%",
-  borderCollapse: "collapse",
-  tableLayout: "auto",
-});
-
-export const theadStatic = style({});
-
-export const theadSticky = style({
-  position: "sticky",
-  top: 0,
-  zIndex: 1,
-});
-
-export const theadStickyScrolled = style({
-  position: "sticky",
-  top: 0,
-  zIndex: 1,
-  boxShadow: themeContract.shadowSm,
-});
-
-export const headRow = style({
-  backgroundColor: themeContract.backgroundSubtle,
-});
-
-export const th = style({
-  paddingTop: 10,
-  paddingBottom: 10,
-  paddingLeft: 12,
-  paddingRight: 12,
-  fontSize: "12px",
-  fontWeight: fontWeight.semibold,
-  color: themeContract.contentSecondary,
-  textAlign: "left",
-  textTransform: "uppercase",
-  letterSpacing: "0.05em",
-  borderBottomWidth: 1,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.border,
-  whiteSpace: "nowrap",
-  userSelect: "none",
-});
-
-export const thSm = style({
-  fontSize: "11px",
-  paddingTop: 6,
-  paddingBottom: 6,
-  paddingLeft: 8,
-  paddingRight: 8,
-});
-
-export const thLg = style({
-  fontSize: "13px",
-  paddingTop: 14,
-  paddingBottom: 14,
-  paddingLeft: 16,
-  paddingRight: 16,
-});
-
-export const thSortable = style({
-  cursor: "pointer",
-});
-
-export const thContent = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-});
-
-export const td = style({
-  paddingTop: 10,
-  paddingBottom: 10,
-  paddingLeft: 12,
-  paddingRight: 12,
-  fontSize: fontSize.small,
-  color: themeContract.contentPrimary,
-  borderBottomWidth: 1,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.borderSubtle,
-  whiteSpace: "nowrap",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-});
-
-export const tdSm = style({
-  paddingTop: 6,
-  paddingBottom: 6,
-  paddingLeft: 8,
-  paddingRight: 8,
-});
-
-export const tdLg = style({
-  paddingTop: 14,
-  paddingBottom: 14,
-  paddingLeft: 16,
-  paddingRight: 16,
-});
-
-export const tr = style({
-  transition: "background-color 0.15s ease",
-});
-
-export const trSm = style({ height: 36 });
-
-export const trLg = style({ height: 60 });
-
-export const trSelected = style({
-  backgroundColor: themeContract.backgroundSubtle,
-});
-
-export const emptyTd = style({
-  padding: 0,
-  borderBottomWidth: 1,
-  borderBottomStyle: "solid",
-  borderBottomColor: themeContract.border,
-});
-
-// ─── Loading skeleton ────────────────────────────────────────────────────────
-
-export const loadingWrapper = style({
-  width: "100%",
-});
-
-export const loadingTable = style({
-  width: "100%",
-  borderCollapse: "collapse",
-});
-
-export const headerCell = style({
-  paddingTop: 12,
-  paddingBottom: 12,
-  paddingLeft: 16,
-  paddingRight: 16,
-  borderBottomColor: themeContract.border,
-  borderBottomStyle: "solid",
-  borderBottomWidth: 1,
-});
-
-export const skeletonBar = style({
-  borderRadius: 4,
-  backgroundColor: themeContract.surfaceRaised,
-  animationName: pulse,
-  animationDuration: "1.5s",
-  animationTimingFunction: "ease-in-out",
-  animationIterationCount: "infinite",
-});
-
-export const cell = style({
-  paddingTop: 12,
-  paddingBottom: 12,
-  paddingLeft: 16,
-  paddingRight: 16,
-  borderBottomColor: themeContract.borderSubtle,
-  borderBottomStyle: "solid",
-  borderBottomWidth: 1,
-});
-
-export const loadingFooter = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: 16,
-  gap: 8,
-});
-
-export const loadingText = style({
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-});
-
-// ─── Column toggle ───────────────────────────────────────────────────────────
-
-export const itemLabel = style({
-  fontSize: 14,
-});
-
-export const deselectLabel = style({
-  color: themeContract.contentSecondary,
-  fontSize: 13,
-});
-
-export const checkboxChecked = style({
-  marginLeft: "auto",
-  width: 16,
-  height: 16,
-  borderRadius: 3,
-  borderWidth: 1.5,
-  borderStyle: "solid",
-  borderColor: themeContract.primary,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: themeContract.primary,
-});
-
-export const checkboxUnchecked = style({
-  marginLeft: "auto",
-  width: 16,
-  height: 16,
-  borderRadius: 3,
-  borderWidth: 1.5,
-  borderStyle: "solid",
-  borderColor: themeContract.border,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: "transparent",
-});
-
-export const partial = style({
-  width: 8,
-  height: 2,
-  borderRadius: 1,
-  backgroundColor: themeContract.contentSecondary,
-});
-
-// ─── Empty state ─────────────────────────────────────────────────────────────
-
-export const emptyContainer = style({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  paddingTop: spacing.xxxlarge,
-  paddingBottom: spacing.xxxlarge,
-  paddingLeft: spacing.medium,
-  paddingRight: spacing.medium,
-  gap: 12,
-});
-
-export const iconWrap = style({
-  opacity: 0.5,
-});
-
-export const message = style({
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-  lineHeight: 1.5,
-  textAlign: "center",
-  margin: 0,
-});
-
-export const actionWrap = style({
-  marginTop: spacing.xsmall,
-});
-
-// ─── Error state ─────────────────────────────────────────────────────────────
-
-export const errorContainer = style({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  paddingTop: spacing.xxxlarge,
-  paddingBottom: spacing.xxxlarge,
-  paddingLeft: spacing.medium,
-  paddingRight: spacing.medium,
-  gap: 12,
-});
-
-export const errorMessage = style({
-  color: themeContract.sentimentNegative,
-  fontSize: fontSize.small,
-  lineHeight: 1.5,
-  textAlign: "center",
-  margin: 0,
-});
-
-// ─── Infinite loader ─────────────────────────────────────────────────────────
-
-export const sentinel = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: spacing.medium,
-  minHeight: 48,
-});
-
-export const loadingInline = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-});
-
-export const loaderLoadingText = style({
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-});
-
-export const noMore = style({
-  color: themeContract.contentDisabled,
-  fontSize: fontSize.small,
-});
-
-export const center = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  padding: spacing.medium,
-});
-
-// ─── Pagination ──────────────────────────────────────────────────────────────
-
-export const nav = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  paddingTop: spacing.small,
-  paddingBottom: spacing.small,
-});
-
-export const info = style({
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-});
-
-export const controls = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-});
-
-export const range = style({
-  color: themeContract.contentSecondary,
-  fontSize: fontSize.small,
-  whiteSpace: "nowrap",
-});
-
-export const buttonGroup = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.xsmall,
-});
-
-export const pageWrap = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 2,
-});
-
-export const ellipsis = style({
-  color: themeContract.contentDisabled,
-  fontSize: fontSize.small,
-  paddingLeft: spacing.xsmall,
-  paddingRight: spacing.xsmall,
-});
-
-export const pageButton = style({
-  minWidth: 32,
-  height: 32,
-});
-
-// ─── Toolbar ─────────────────────────────────────────────────────────────────
-
-export const toolbarContainer = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: spacing.medium,
-  paddingTop: spacing.small,
-  paddingBottom: spacing.small,
-});
-
-export const leftGroup = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-  flex: 1,
-});
-
-export const rightGroup = style({
-  display: "flex",
-  alignItems: "center",
-  gap: spacing.small,
-});
-
-export const searchWrap = style({
-  flex: 1,
-  maxWidth: 320,
-});