@rovula/ui 0.1.28 → 0.1.30

package/src/components/Table/Table.tsx

@@ -1,52 +1,161 @@
 import * as React from "react";
-
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronFirst,
+  ChevronLast,
+} from "lucide-react";
 import { cn } from "@/utils/cn";
+import ActionButton from "@/components/ActionButton/ActionButton";
 
+// ---------------------------------------------------------------------------
+// Table  — root scroll container + <table>
+// Uses border-separate / border-spacing-0 so border-r on cells works cleanly.
+//
+// Colours adapt automatically when an ancestor carries data-surface="panel".
+// See src/theme/tokens/components/table.css for the token definitions.
+// ---------------------------------------------------------------------------
 const Table = React.forwardRef<
   HTMLTableElement,
   {
     rootClassName?: string;
     rootRef?: React.LegacyRef<HTMLDivElement>;
+    /**
+     * Wraps the table in a rounded frame (`rounded-md` + `border-table-c-border`).
+     * Uses an outer `overflow-hidden` shell and an inner scroll area so corners clip
+     * cleanly (same pattern as scrollable bordered tables elsewhere in the system).
+     * For pagination in the same frame, wrap `Table` + `TablePagination` in your own
+     * bordered div instead of relying on this prop alone.
+     */
+    bordered?: boolean;
+    /**
+     * When false, render only `<table>` (no inner `overflow-auto` wrapper).
+     * Use when a parent already provides the scrollport — e.g. `DataTable` — so
+     * `sticky` header rows stick to the correct ancestor.
+     * Ignored when `bordered` is true (bordered tables always use the inner scroll shell).
+     */
+    scrollableWrapper?: boolean;
   } & React.HTMLAttributes<HTMLTableElement>
->(({ rootClassName, className, rootRef, ...props }, ref) => (
-  <div
-    className={cn("relative h-full w-full overflow-auto", rootClassName)}
-    ref={rootRef}
-  >
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm border-collapse", className)}
-      {...props}
-    />
-  </div>
-));
+>(
+  (
+    {
+      rootClassName,
+      className,
+      rootRef,
+      bordered = false,
+      scrollableWrapper = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const scrollClassName = cn(
+      "relative h-full w-full min-h-0 overflow-auto",
+      "ui-scrollbar ui-scrollbar-x-m ui-scrollbar-y-s",
+    );
+
+    const tableClassName = cn(
+      "min-w-full caption-bottom border-separate border-spacing-0",
+      className,
+    );
+
+    const tableEl = <table ref={ref} className={tableClassName} {...props} />;
+
+    if (!bordered && scrollableWrapper === false) {
+      return (
+        <table
+          ref={ref}
+          className={cn(tableClassName, rootClassName)}
+          {...props}
+        />
+      );
+    }
 
+    if (bordered) {
+      return (
+        <div
+          className={cn(
+            "relative flex h-full w-full min-h-0 flex-col overflow-hidden rounded-md border border-table-c-border",
+            rootClassName,
+          )}
+          ref={rootRef}
+        >
+          <div className={scrollClassName}>{tableEl}</div>
+        </div>
+      );
+    }
+
+    return (
+      <div className={cn(scrollClassName, rootClassName)} ref={rootRef}>
+        {tableEl}
+      </div>
+    );
+  },
+);
 Table.displayName = "Table";
 
+// ---------------------------------------------------------------------------
+// TableHeader
+// The header-to-body separator resolves from --table-c-header-line:
+//   default → transparent  (bg contrast between table-bg-main and row-bg
+//             provides visual separation — no explicit line needed)
+//   panel   → table-panel-main-line  (all bgs are transparent, explicit
+//             line required)
+// ---------------------------------------------------------------------------
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn("[&_tr]:border-b bg-secondary-80", className)}
+    className={cn(
+      "[&_tr>th]:box-border [&_tr>th]:border-b [&_tr>th]:border-b-table-c-header-line",
+      className,
+    )}
     {...props}
   />
 ));
 TableHeader.displayName = "TableHeader";
 
+// ---------------------------------------------------------------------------
+// TableBody
+// striped=true  → alternating bg colours (odd=row-bg, even=row-bg-even),
+//                 NO horizontal row strokes
+// striped=false → single row-bg colour, row strokes via TableRow divided prop
+//
+// Hover, selected, and bg colours all resolve from table-c-* tokens so they
+// automatically switch when inside a [data-surface="panel"] ancestor.
+// ---------------------------------------------------------------------------
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+  { striped?: boolean } & React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, striped = false, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={cn(
+      // Remove the bottom border on the very last row's cells in every mode.
+      "[&_tr:last-child>td]:border-b-0 [&_tr:last-child>th]:border-b-0",
+      "[&_tr]:bg-table-c-row-bg",
+      // !important beats nth-child specificity so hover always wins.
+      "[&_tr:hover]:!bg-table-c-hover",
+      "[&_tr[data-state=selected]]:!bg-table-c-selected",
+      "[&_tr[data-highlighted=true]]:!bg-table-c-selected",
+      striped && [
+        "[&_tr:nth-child(odd)]:bg-table-c-row-bg",
+        "[&_tr:nth-child(even)]:bg-table-c-row-bg-even",
+        // Remove row stroke — colour alternation provides separation.
+        "[&_tr>td]:border-b-0",
+      ],
+      className,
+    )}
     {...props}
   />
 ));
 TableBody.displayName = "TableBody";
 
+// ---------------------------------------------------------------------------
+// TableFooter
+// ---------------------------------------------------------------------------
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
@@ -54,29 +163,53 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-transparent-grey2-8 font-medium [&>tr]:last:border-b-0",
-      className
+      "bg-table-c-header-bg border-t border-t-table-c-header-line font-medium [&>tr]:last:border-b-0",
+      className,
     )}
     {...props}
   />
 ));
 TableFooter.displayName = "TableFooter";
 
+// ---------------------------------------------------------------------------
+// TableRow
+// divided=true    → horizontal separator on child td/th cells (border-b)
+//                   NOTE: with border-separate tables, borders on <tr> are
+//                   invisible — must target cells directly via CSS selectors.
+// divided=false   → no separator (striped rows / empty row)
+// colDivided=true → vertical column dividers on every non-last td / th child
+// ---------------------------------------------------------------------------
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+  {
+    divided?: boolean;
+    colDivided?: boolean;
+  } & React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, divided = true, colDivided = false, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-transparent-grey2-8 data-[state=selected]:bg-grey-20",
-      className
+      "transition-colors  box-border",
+      // Row separator — applied on cells because border-separate ignores tr borders
+      divided && [
+        "[&>td]:border-b [&>td]:border-b-table-c-row-line",
+        "[&>th]:border-b [&>th]:border-b-table-c-row-line",
+      ],
+      // Column dividers on every non-last cell
+      colDivided && [
+        "[&>td:not(:last-child)]:border-r [&>td:not(:last-child)]:border-r-table-c-col-line",
+        "[&>th:not(:last-child)]:border-r [&>th:not(:last-child)]:border-r-table-c-col-line",
+      ],
+      className,
     )}
     {...props}
   />
 ));
 TableRow.displayName = "TableRow";
 
+// ---------------------------------------------------------------------------
+// TableHead  (th)
+// ---------------------------------------------------------------------------
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
   React.ThHTMLAttributes<HTMLTableCellElement>
@@ -84,14 +217,23 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      " h-12 py-3 px-6 text-left align-middle typography-body2 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
-      className
+      "box-border py-3 px-3 text-left align-middle",
+      "typography-body2 text-text-contrast-max",
+      "bg-table-c-header-bg",
+      "leading-[20px]",
+      // Prefer min-width only so callers (e.g. DataTable exactWidth) can set
+      // a different width via inline style without fighting a fixed `w-10`.
+      "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10",
+      className,
     )}
     {...props}
   />
 ));
 TableHead.displayName = "TableHead";
 
+// ---------------------------------------------------------------------------
+// TableCell  (td)
+// ---------------------------------------------------------------------------
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
   React.TdHTMLAttributes<HTMLTableCellElement>
@@ -99,26 +241,161 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      " py-3 px-6 text-left align-middle  typography-body3 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
-      className
+      "box-border py-3 px-3 text-left align-middle",
+      "typography-body3 text-text-contrast-max",
+      "leading-[18px]", // content สูง 18
+      // Inherit row background from <tr> so every cell paints the same fill
+      // (some table layouts / browsers leave the last column visually “empty”).
+      "bg-inherit",
+      "[&:has([role=checkbox])]:px-3 [&:has([role=checkbox])]:min-w-10",
+      className,
     )}
     {...props}
   />
 ));
 TableCell.displayName = "TableCell";
 
+// ---------------------------------------------------------------------------
+// TableCaption
+// ---------------------------------------------------------------------------
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-text-g-contrast-medium", className)}
+    className={cn("mt-4 pb-3 text-sm text-text-g-contrast-medium", className)}
     {...props}
   />
 ));
 TableCaption.displayName = "TableCaption";
 
+// ---------------------------------------------------------------------------
+// TablePagination
+// Resolves bg and top-border from the same table-c-* tokens so it adapts
+// automatically — no variant prop needed.
+//   default → bg-table-c-header-bg (= table-bg-main), border transparent
+//   panel   → bg transparent, border table-panel-main-line
+// ---------------------------------------------------------------------------
+export interface TablePaginationProps {
+  pageIndex: number;
+  pageSize: number;
+  totalCount: number;
+  pageSizeOptions?: number[];
+  onPageChange: (pageIndex: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  className?: string;
+}
+
+const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(
+  (
+    {
+      pageIndex,
+      pageSize,
+      totalCount,
+      pageSizeOptions = [10, 20, 50, 100],
+      onPageChange,
+      onPageSizeChange,
+      className,
+    },
+    ref,
+  ) => {
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    const from = totalCount === 0 ? 0 : pageIndex * pageSize + 1;
+    const to = Math.min((pageIndex + 1) * pageSize, totalCount);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-end gap-8 px-6 py-2",
+          "bg-table-c-header-bg",
+          "border-t border-t-table-c-header-line",
+          className,
+        )}
+      >
+        {/* Items per page */}
+        <div className="flex items-center gap-3">
+          <span className="typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+            items per page
+          </span>
+          <div className="relative">
+            <select
+              value={pageSize}
+              onChange={(e) => {
+                onPageSizeChange(Number(e.target.value));
+                onPageChange(0);
+              }}
+              className={cn(
+                "appearance-none w-[72px] rounded-md border border-input-default-stroke",
+                "bg-table-c-header-bg p-2 pr-7",
+                "typography-small2 text-text-g-contrast-high",
+                "cursor-pointer focus:outline-none focus:ring-1 focus:ring-input-active-stroke",
+              )}
+            >
+              {pageSizeOptions.map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+            <ChevronDown
+              className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 size-[14px] text-text-g-contrast-high"
+              aria-hidden
+            />
+          </div>
+        </div>
+
+        {/* Range label */}
+        <span className="typography-subtitle4 text-text-g-contrast-high whitespace-nowrap tabular-nums">
+          {from}–{to} of {totalCount} items
+        </span>
+
+        {/* Page navigation */}
+        <div className="flex items-center gap-2">
+          <ActionButton
+            variant="icon"
+            size="sm"
+            onClick={() => onPageChange(0)}
+            disabled={pageIndex === 0}
+            aria-label="First page"
+          >
+            <ChevronFirst />
+          </ActionButton>
+          <ActionButton
+            variant="icon"
+            size="sm"
+            onClick={() => onPageChange(pageIndex - 1)}
+            disabled={pageIndex === 0}
+            aria-label="Previous page"
+          >
+            <ChevronLeft />
+          </ActionButton>
+          <ActionButton
+            variant="icon"
+            size="sm"
+            onClick={() => onPageChange(pageIndex + 1)}
+            disabled={pageIndex >= totalPages - 1}
+            aria-label="Next page"
+          >
+            <ChevronRight />
+          </ActionButton>
+          <ActionButton
+            variant="icon"
+            size="sm"
+            onClick={() => onPageChange(totalPages - 1)}
+            disabled={pageIndex >= totalPages - 1}
+            aria-label="Last page"
+          >
+            <ChevronLast />
+          </ActionButton>
+        </div>
+      </div>
+    );
+  },
+);
+TablePagination.displayName = "TablePagination";
+
 export {
   Table,
   TableHeader,
@@ -128,4 +405,5 @@ export {
   TableRow,
   TableCell,
   TableCaption,
+  TablePagination,
 };

package/src/components/TextInput/TextInput.stories.tsx

@@ -45,6 +45,86 @@ export const Default = {
   },
 } satisfies StoryObj;
 
+/**
+ * `isFloatingLabel={false}` — visible **`placeholder`**, no floating animation,
+ * and no inner `<label>` when `label` is empty (e.g. table cells, compact filters).
+ * Pair with `required={false}` + `hasClearIcon={false}` when mimicking inline fields.
+ */
+export const NonFloatingLabel = {
+  render: () => (
+    <div className="flex w-full max-w-4xl flex-col gap-8">
+      <div className="flex flex-col gap-3">
+        <h4 className="typography-subtitle4 text-text-g-contrast-medium">
+          Placeholder only — empty <code className="typography-small2">label</code>{" "}
+          (no floating label, no label node)
+        </h4>
+        <p className="typography-small2 text-text-g-contrast-low max-w-2xl">
+          Tab order follows DOM, like native inputs in a row.
+        </p>
+        <div className="flex flex-row flex-wrap items-end gap-4">
+          <TextInput
+            id="nf-cell-lg"
+            size="lg"
+            isFloatingLabel={false}
+            label=""
+            required={false}
+            hasClearIcon={false}
+            keepFooterSpace={false}
+            placeholder="Column name"
+            fullwidth={false}
+            aria-label="Column name"
+          />
+          <TextInput
+            id="nf-cell-md"
+            size="md"
+            isFloatingLabel={false}
+            label=""
+            required={false}
+            hasClearIcon={false}
+            keepFooterSpace={false}
+            placeholder="Column name"
+            fullwidth={false}
+            aria-label="Column name"
+          />
+          <TextInput
+            id="nf-cell-sm"
+            size="sm"
+            isFloatingLabel={false}
+            label=""
+            required={false}
+            hasClearIcon={false}
+            keepFooterSpace={false}
+            placeholder="Column name"
+            fullwidth={false}
+            aria-label="Column name"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <h4 className="typography-subtitle4 text-text-g-contrast-medium">
+          Static label inside field (non-floating layout)
+        </h4>
+        <div className="flex flex-row flex-wrap gap-4">
+          <TextInput
+            id="nf-static-md"
+            size="md"
+            isFloatingLabel={false}
+            label="Department"
+            required={false}
+            hasClearIcon
+            keepFooterSpace
+            placeholder="e.g. Engineering"
+            helperText="Shown as fixed label + real placeholder."
+            fullwidth={false}
+            className="min-w-[240px]"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
 const InputWithRef = (props: any) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 

package/src/components/TextInput/TextInput.styles.ts

@@ -5,10 +5,15 @@ export const inputVariant = cva(
     "truncate",
     "border-0 outline-none",
     "flex w-auto box-border",
-    "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
+    "peer text-input-filled-text bg-transparent caret-primary",
   ],
   {
     variants: {
+      /** When `true`, placeholder is transparent — floating label uses a space placeholder. */
+      floatingLabelPlaceholder: {
+        true: "placeholder:text-transparent",
+        false: "placeholder:text-input-default-text",
+      },
       size: {
         sm: "p-2 px-3 typography-small1",
         md: "py-2 px-3 typography-subtitle4",
@@ -144,6 +149,7 @@ export const inputVariant = cva(
       hasSearchIcon: false,
       leftSectionIcon: false, // TODO function style
       rightSectionIcon: false,
+      floatingLabelPlaceholder: true,
     },
   },
 );

package/src/components/TextInput/TextInput.tsx

@@ -74,7 +74,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       rounded = "normal",
       variant = "outline",
       type = "text",
-      iconMode = "solid",
+      iconMode = "flat",
       helperText,
       errorMessage,
       warningMessage,
@@ -101,6 +101,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       format,
       trimOnCommit,
       normalizeOnCommit,
+      placeholder,
       ...props
     },
     ref,
@@ -143,6 +144,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         (iconMode === "flat" && hasRightSectionIcon) || hasClearIcon,
       leftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
       rightSectionIcon: iconMode === "solid" ? hasRightSectionIcon : false,
+      floatingLabelPlaceholder: isFloatingLabel,
     });
     const labelClassname = labelVariant({
       size,
@@ -377,12 +379,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       handleOnClickRightSectionIcon,
     ]);
 
+    const showLabel =
+      isFloatingLabel || (label != null && String(label) !== "");
+
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
           <input
             {...props}
-            placeholder=" "
+            placeholder={isFloatingLabel ? " " : placeholder ?? ""}
             ref={stableRef}
             type={type}
             id={_id}
@@ -435,18 +440,20 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
           )}
           {endIconElement}
 
-          <label htmlFor={_id} className={cn(labelClassname)}>
-            {label}{" "}
-            {required && (
-              <span
-                className={cn("text-input-error", {
-                  "text-input-disable-text": disabled,
-                })}
-              >
-                *
-              </span>
-            )}
-          </label>
+          {showLabel && (
+            <label htmlFor={_id} className={cn(labelClassname, labelClassName)}>
+              {label}{" "}
+              {required && (
+                <span
+                  className={cn("text-input-error", {
+                    "text-input-disable-text": disabled,
+                  })}
+                >
+                  *
+                </span>
+              )}
+            </label>
+          )}
         </div>
         {(feedbackMessage || keepFooterSpace) && (
           <span className={helperTextClassname}>

package/src/test/setup.ts

@@ -0,0 +1,50 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(() => {
+  cleanup();
+});
+
+/* jsdom: scrollTo must update scrollTop or TanStack Virtual keeps scrollOffset > 0 */
+Element.prototype.scrollTo = function scrollTo(
+  this: Element,
+  arg?: ScrollToOptions | number,
+  y?: number,
+): void {
+  if (!(this instanceof HTMLElement)) {
+    return;
+  }
+  if (typeof arg === "object" && arg != null && "top" in arg) {
+    const t = (arg as { top?: number }).top;
+    this.scrollTop = typeof t === "number" ? t : 0;
+    return;
+  }
+  if (typeof arg === "number") {
+    this.scrollTop = typeof y === "number" ? y : arg;
+  }
+};
+if (typeof HTMLElement.prototype.scrollIntoView !== "function") {
+  HTMLElement.prototype.scrollIntoView = function scrollIntoView() {
+    /* no-op */
+  };
+}
+
+/**
+ * TanStack Virtual subscribes to ResizeObserver; a no-op observe() never
+ * re-measures after layout. Schedule an initial callback so scrollport size
+ * updates after mount (still relies on getBoundingClientRect / layout mocks in tests).
+ */
+globalThis.ResizeObserver = class ResizeObserver {
+  constructor(private readonly cb: ResizeObserverCallback) {}
+
+  observe(): void {
+    queueMicrotask(() => {
+      this.cb([], this as unknown as ResizeObserver);
+    });
+  }
+
+  unobserve(): void {}
+
+  disconnect(): void {}
+};