@dragunio/fe-libs 0.1.0 → 0.1.1

package/README.md

@@ -61,4 +61,26 @@ import { Button, PlusIcon, Table } from '@dragunio/fe-libs';
 import '@dragunio/fe-libs/styles.css';
 ```
 
+### Resizable data table
+
+Pass `headers` and `data` to have `Table` derive the maximum column count and an initial width for each column. The resize callback emits pixel widths, ready to persist in user preferences.
+
+```tsx
+const [columnSizes, setColumnSizes] = useState<number[]>();
+
+<Table
+  headers={['Name', 'Email']}
+  data={[
+    ['Ada Lovelace', 'ada@example.com'],
+    ['Grace Hopper', 'grace@example.com'],
+  ]}
+  striped
+  defaultColumnSizes={[180, 280]}
+  columnSizes={columnSizes}
+  onColumnResize={(nextSizes) => setColumnSizes(nextSizes)}
+/>
+```
+
+Use `minColumnWidth` to change the minimum resize limit. The header resize handles support pointer dragging and left/right arrow keys.
+
 The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a peer dependency.

package/dist/index.d.mts

@@ -51,10 +51,29 @@ declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
 declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
 
+type TableData = readonly (readonly ReactNode[])[];
+type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
 type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    /** Enables alternating background colors for body rows. */
     striped?: boolean;
+    /** Column labels. Passing headers or data enables the data-driven table API. */
+    headers?: readonly ReactNode[];
+    /** Rows of cells. A row can contain fewer or more cells than headers. */
+    data?: TableData;
+    /** Initial widths, in pixels, for the matching column indexes. */
+    defaultColumnSizes?: readonly number[];
+    /** Controlled column widths, in pixels. */
+    columnSizes?: readonly number[];
+    /** Called while a user resizes a column, with the complete current widths. */
+    onColumnResize?: ColumnResizeHandler;
+    /** Smallest width, in pixels, that a user can resize a column to. */
+    minColumnWidth?: number;
 };
-declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
+/**
+ * A semantic table. Use its child primitives for custom markup, or pass headers
+ * and data for an automatically sized, striped and resizable table.
+ */
+declare function Table({ headers, data, striped, children, ...props }: TableProps): react.JSX.Element;
 declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
 declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
 declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
@@ -62,4 +81,4 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
 declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
 declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, getIconSize };

package/dist/index.d.ts

@@ -51,10 +51,29 @@ declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
 declare function CloseIcon(props: IconProps): react.JSX.Element;
 declare function SearchIcon(props: IconProps): react.JSX.Element;
 
+type TableData = readonly (readonly ReactNode[])[];
+type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
 type TableProps = TableHTMLAttributes<HTMLTableElement> & {
+    /** Enables alternating background colors for body rows. */
     striped?: boolean;
+    /** Column labels. Passing headers or data enables the data-driven table API. */
+    headers?: readonly ReactNode[];
+    /** Rows of cells. A row can contain fewer or more cells than headers. */
+    data?: TableData;
+    /** Initial widths, in pixels, for the matching column indexes. */
+    defaultColumnSizes?: readonly number[];
+    /** Controlled column widths, in pixels. */
+    columnSizes?: readonly number[];
+    /** Called while a user resizes a column, with the complete current widths. */
+    onColumnResize?: ColumnResizeHandler;
+    /** Smallest width, in pixels, that a user can resize a column to. */
+    minColumnWidth?: number;
 };
-declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
+/**
+ * A semantic table. Use its child primitives for custom markup, or pass headers
+ * and data for an automatically sized, striped and resizable table.
+ */
+declare function Table({ headers, data, striped, children, ...props }: TableProps): react.JSX.Element;
 declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
 declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
 declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
@@ -62,4 +81,4 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
 declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
 declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
 
-export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
+export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, getIconSize };

package/dist/index.js

@@ -117,8 +117,118 @@ function SearchIcon(props) {
 var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var TableContext = (0, import_react2.createContext)({ striped: false });
-function Table({ striped = false, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableContext.Provider, { value: { striped }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { ...props, children }) });
+var MIN_COLUMN_WIDTH = 96;
+var MAX_COLUMN_WIDTH = 1200;
+function getColumnCount(headers, data) {
+  return Math.max(headers.length, ...data.map((row) => row.length), 0);
+}
+function getText(value) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) return value.map(getText).join("");
+  if ((0, import_react2.isValidElement)(value)) return getText(value.props.children);
+  return "";
+}
+function autoColumnSize(columnIndex, headers, data) {
+  const values = [headers[columnIndex], ...data.map((row) => row[columnIndex])];
+  const longestText = values.reduce((longest, value) => Math.max(longest, getText(value).length), 0);
+  return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, longestText * 8 + 40));
+}
+function getInitialColumnSizes(headers, data, sizes, minColumnWidth = MIN_COLUMN_WIDTH) {
+  return Array.from({ length: getColumnCount(headers, data) }, (_, columnIndex) => {
+    const suppliedSize = sizes?.[columnIndex];
+    return typeof suppliedSize === "number" && Number.isFinite(suppliedSize) ? Math.min(MAX_COLUMN_WIDTH, Math.max(minColumnWidth, suppliedSize)) : autoColumnSize(columnIndex, headers, data);
+  });
+}
+function sameSizes(left, right) {
+  return left.length === right.length && left.every((size, index) => size === right[index]);
+}
+function DataTable({
+  headers,
+  data,
+  striped = true,
+  defaultColumnSizes,
+  columnSizes,
+  onColumnResize,
+  minColumnWidth = MIN_COLUMN_WIDTH,
+  className,
+  ...props
+}) {
+  const columnCount = getColumnCount(headers, data);
+  const safeMinWidth = Math.max(1, minColumnWidth);
+  const generatedSizes = (0, import_react2.useMemo)(
+    () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
+    [headers, data, defaultColumnSizes, safeMinWidth]
+  );
+  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react2.useState)(generatedSizes);
+  const resizeState = (0, import_react2.useRef)();
+  const [isResizing, setIsResizing] = (0, import_react2.useState)(false);
+  const sizes = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
+  (0, import_react2.useEffect)(() => {
+    if (columnSizes) return;
+    setUncontrolledSizes((currentSizes) => {
+      const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
+      return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
+    });
+  }, [columnSizes, generatedSizes]);
+  const updateColumnSize = (0, import_react2.useCallback)((columnIndex, nextSize) => {
+    const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
+    const nextSizes = sizes.map((size, index) => index === columnIndex ? clampedSize : size);
+    if (!columnSizes) setUncontrolledSizes(nextSizes);
+    onColumnResize?.(nextSizes, columnIndex);
+  }, [columnSizes, onColumnResize, safeMinWidth, sizes]);
+  (0, import_react2.useEffect)(() => {
+    const onPointerMove = (event) => {
+      const activeResize = resizeState.current;
+      if (!activeResize) return;
+      updateColumnSize(activeResize.columnIndex, activeResize.startWidth + event.clientX - activeResize.startX);
+    };
+    const stopResizing = () => {
+      resizeState.current = void 0;
+      setIsResizing(false);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stopResizing);
+    window.addEventListener("pointercancel", stopResizing);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stopResizing);
+      window.removeEventListener("pointercancel", stopResizing);
+    };
+  }, [updateColumnSize]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("colgroup", { children: sizes.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("col", { style: { width: `${size}px` } }, index)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("th", { scope: "col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: "fe-table__resize-handle",
+          role: "separator",
+          "aria-label": `Resize ${getText(headers[columnIndex]) || `column ${columnIndex + 1}`}`,
+          "aria-orientation": "vertical",
+          "aria-valuemin": safeMinWidth,
+          "aria-valuemax": MAX_COLUMN_WIDTH,
+          "aria-valuenow": sizes[columnIndex] ?? safeMinWidth,
+          tabIndex: 0,
+          onPointerDown: (event) => {
+            event.preventDefault();
+            resizeState.current = { columnIndex, startX: event.clientX, startWidth: sizes[columnIndex] ?? safeMinWidth };
+            setIsResizing(true);
+            event.currentTarget.setPointerCapture(event.pointerId);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowLeft") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) - 16);
+            if (event.key === "ArrowRight") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) + 16);
+          }
+        }
+      )
+    ] }, columnIndex)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, rowIndex)) })
+  ] }) });
+}
+function Table({ headers, data, striped, children, ...props }) {
+  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { ...props });

package/dist/index.mjs

@@ -76,11 +76,130 @@ function SearchIcon(props) {
 }
 
 // packages/table/src/index.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import {
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TableContext = createContext({ striped: false });
-function Table({ striped = false, children, ...props }) {
-  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped }, children: /* @__PURE__ */ jsx3("table", { ...props, children }) });
+var MIN_COLUMN_WIDTH = 96;
+var MAX_COLUMN_WIDTH = 1200;
+function getColumnCount(headers, data) {
+  return Math.max(headers.length, ...data.map((row) => row.length), 0);
+}
+function getText(value) {
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) return value.map(getText).join("");
+  if (isValidElement(value)) return getText(value.props.children);
+  return "";
+}
+function autoColumnSize(columnIndex, headers, data) {
+  const values = [headers[columnIndex], ...data.map((row) => row[columnIndex])];
+  const longestText = values.reduce((longest, value) => Math.max(longest, getText(value).length), 0);
+  return Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, longestText * 8 + 40));
+}
+function getInitialColumnSizes(headers, data, sizes, minColumnWidth = MIN_COLUMN_WIDTH) {
+  return Array.from({ length: getColumnCount(headers, data) }, (_, columnIndex) => {
+    const suppliedSize = sizes?.[columnIndex];
+    return typeof suppliedSize === "number" && Number.isFinite(suppliedSize) ? Math.min(MAX_COLUMN_WIDTH, Math.max(minColumnWidth, suppliedSize)) : autoColumnSize(columnIndex, headers, data);
+  });
+}
+function sameSizes(left, right) {
+  return left.length === right.length && left.every((size, index) => size === right[index]);
+}
+function DataTable({
+  headers,
+  data,
+  striped = true,
+  defaultColumnSizes,
+  columnSizes,
+  onColumnResize,
+  minColumnWidth = MIN_COLUMN_WIDTH,
+  className,
+  ...props
+}) {
+  const columnCount = getColumnCount(headers, data);
+  const safeMinWidth = Math.max(1, minColumnWidth);
+  const generatedSizes = useMemo(
+    () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
+    [headers, data, defaultColumnSizes, safeMinWidth]
+  );
+  const [uncontrolledSizes, setUncontrolledSizes] = useState(generatedSizes);
+  const resizeState = useRef();
+  const [isResizing, setIsResizing] = useState(false);
+  const sizes = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
+  useEffect(() => {
+    if (columnSizes) return;
+    setUncontrolledSizes((currentSizes) => {
+      const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
+      return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
+    });
+  }, [columnSizes, generatedSizes]);
+  const updateColumnSize = useCallback((columnIndex, nextSize) => {
+    const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
+    const nextSizes = sizes.map((size, index) => index === columnIndex ? clampedSize : size);
+    if (!columnSizes) setUncontrolledSizes(nextSizes);
+    onColumnResize?.(nextSizes, columnIndex);
+  }, [columnSizes, onColumnResize, safeMinWidth, sizes]);
+  useEffect(() => {
+    const onPointerMove = (event) => {
+      const activeResize = resizeState.current;
+      if (!activeResize) return;
+      updateColumnSize(activeResize.columnIndex, activeResize.startWidth + event.clientX - activeResize.startX);
+    };
+    const stopResizing = () => {
+      resizeState.current = void 0;
+      setIsResizing(false);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stopResizing);
+    window.addEventListener("pointercancel", stopResizing);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stopResizing);
+      window.removeEventListener("pointercancel", stopResizing);
+    };
+  }, [updateColumnSize]);
+  return /* @__PURE__ */ jsx3("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: /* @__PURE__ */ jsxs3("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+    /* @__PURE__ */ jsx3("colgroup", { children: sizes.map((size, index) => /* @__PURE__ */ jsx3("col", { style: { width: `${size}px` } }, index)) }),
+    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs3("th", { scope: "col", children: [
+      /* @__PURE__ */ jsx3("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+      /* @__PURE__ */ jsx3(
+        "span",
+        {
+          className: "fe-table__resize-handle",
+          role: "separator",
+          "aria-label": `Resize ${getText(headers[columnIndex]) || `column ${columnIndex + 1}`}`,
+          "aria-orientation": "vertical",
+          "aria-valuemin": safeMinWidth,
+          "aria-valuemax": MAX_COLUMN_WIDTH,
+          "aria-valuenow": sizes[columnIndex] ?? safeMinWidth,
+          tabIndex: 0,
+          onPointerDown: (event) => {
+            event.preventDefault();
+            resizeState.current = { columnIndex, startX: event.clientX, startWidth: sizes[columnIndex] ?? safeMinWidth };
+            setIsResizing(true);
+            event.currentTarget.setPointerCapture(event.pointerId);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowLeft") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) - 16);
+            if (event.key === "ArrowRight") updateColumnSize(columnIndex, (sizes[columnIndex] ?? safeMinWidth) + 16);
+          }
+        }
+      )
+    ] }, columnIndex)) }) }),
+    /* @__PURE__ */ jsx3("tbody", { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx3("td", { children: row[columnIndex] }, columnIndex)) }, rowIndex)) })
+  ] }) });
+}
+function Table({ headers, data, striped, children, ...props }) {
+  if (headers || data) return /* @__PURE__ */ jsx3(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, ...props });
+  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx3("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
   return /* @__PURE__ */ jsx3("thead", { ...props });

package/dist/styles.css

@@ -212,4 +212,88 @@
   outline-offset: 2px;
 }
 
+/* packages/table/src/styles.css */
+.fe-table {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--fe-table-border, #e3e7ee);
+  border-radius: var(--fe-table-radius, 10px);
+  background: var(--fe-table-background, #fff);
+}
+.fe-table__table,
+table[data-fe-table] {
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+  color: var(--fe-table-text, #242a35);
+  text-align: left;
+}
+.fe-table__table th,
+.fe-table__table td,
+table[data-fe-table] th,
+table[data-fe-table] td {
+  min-width: 0;
+  padding: var(--fe-table-cell-padding, 12px 16px);
+  border-bottom: 1px solid var(--fe-table-border, #e3e7ee);
+  overflow-wrap: anywhere;
+  vertical-align: middle;
+}
+.fe-table__table th,
+table[data-fe-table] th {
+  position: relative;
+  color: var(--fe-table-header-text, #596273);
+  background: var(--fe-table-header-background, #f8fafc);
+  font-size: var(--fe-table-header-font-size, 12px);
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+}
+.fe-table__table tbody tr:last-child td,
+table[data-fe-table] tbody tr:last-child td {
+  border-bottom: 0;
+}
+.fe-table__table[data-striped] tbody tr:nth-child(even),
+table[data-fe-table][data-striped] tbody tr:nth-child(even) {
+  background: var(--fe-table-stripe-background, #f8fafc);
+}
+.fe-table__table tbody tr:hover,
+table[data-fe-table] tbody tr:hover {
+  background: var(--fe-table-hover-background, #edf5ff);
+}
+.fe-table__header-content {
+  display: block;
+  padding-right: 16px;
+}
+.fe-table__resize-handle {
+  position: absolute;
+  z-index: 1;
+  top: 7px;
+  right: 4px;
+  width: 4px;
+  height: calc(100% - 14px);
+  border-radius: 4px;
+  background: var(--fe-table-resize-handle-background, #d6deea);
+  cursor: col-resize;
+  touch-action: none;
+  outline: none;
+}
+.fe-table__resize-handle::after {
+}
+.fe-table__resize-handle:hover,
+.fe-table__resize-handle:focus-visible,
+.fe-table[data-resizing] .fe-table__resize-handle {
+  background: var(--fe-table-resize-handle-active-background, #bfdbfe);
+}
+.fe-table__resize-handle:hover::after,
+.fe-table__resize-handle:focus-visible::after,
+.fe-table[data-resizing] .fe-table__resize-handle::after {
+  background: var(--fe-table-resize-handle, #1d4ed8);
+  box-shadow: -3px 0 var(--fe-table-resize-handle, #1d4ed8), 3px 0 var(--fe-table-resize-handle, #1d4ed8);
+}
+.fe-table__resize-handle:focus-visible {
+  box-shadow: 0 0 0 2px var(--fe-table-focus-ring, #2563eb);
+}
+
 /* src/styles.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dragunio/fe-libs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Reusable React components, icons, and table primitives.",
   "license": "MIT",
   "repository": { "type": "git", "url": "git+https://github.com/kdragon113/fe-libs.git" },