react-excel-lite 0.0.1 → 0.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 prkgnt
+
+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/README.md

@@ -0,0 +1,248 @@
+# react-excel-lite
+
+[![GitHub repo](https://img.shields.io/badge/GitHub-repo-grey?logo=github)](https://github.com/prkgnt/react-excel-lite)
+[![npm package](https://img.shields.io/npm/v/react-excel-lite?color=brightgreen&label=npm)](https://www.npmjs.org/package/react-excel-lite)
+[![npm downloads](https://img.shields.io/npm/dw/react-excel-lite)](https://www.npmjs.org/package/react-excel-lite)
+[![MIT License](https://img.shields.io/github/license/prkgnt/react-excel-lite)](https://github.com/prkgnt/react-excel-lite/blob/main/LICENSE)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/prkgnt/react-excel-lite/pulls)
+
+A lightweight, Excel-like editable grid component for React.
+
+## Features
+
+- Excel-like cell selection (click & drag)
+- Copy/Paste support (Ctrl+C / Ctrl+V)
+- Auto Fill with arithmetic sequence detection (drag fill handle)
+- Grouped column headers with custom styling
+- Row headers with custom styling
+- Keyboard shortcuts (Delete/Backspace to clear)
+- Zero external dependencies
+
+## Installation
+
+```bash
+npm install react-excel-lite
+```
+
+## Quick Start
+
+```tsx
+import { useState } from "react";
+import { ExcelGrid } from "react-excel-lite";
+
+function App() {
+  const [data, setData] = useState([
+    ["100", "200", "300"],
+    ["400", "500", "600"],
+    ["700", "800", "900"],
+  ]);
+
+  return <ExcelGrid data={data} onChange={setData} />;
+}
+```
+
+## Props
+
+| Prop             | Type                         | Required | Description                 |
+| ---------------- | ---------------------------- | -------- | --------------------------- |
+| `data`           | `string[][]`                 | Yes      | 2D array of strings         |
+| `onChange`       | `(data: string[][]) => void` | Yes      | Callback when data changes  |
+| `rowHeaders`     | `RowHeaderGroup[]`           | No       | Row header definitions      |
+| `colHeaders`     | `ColHeaderGroup[]`           | No       | Grouped column headers      |
+| `className`      | `string`                     | No       | CSS class for container     |
+| `rowHeaderTitle` | `string`                     | No       | Title for row header column |
+| `styles`         | `GridStyles`                 | No       | Style configuration object  |
+
+## With Headers
+
+```tsx
+import { useState } from "react";
+import { ExcelGrid } from "react-excel-lite";
+import type { ColHeaderGroup, RowHeaderGroup } from "react-excel-lite";
+
+function App() {
+  const [data, setData] = useState([
+    ["100", "200", "300", "400"],
+    ["500", "600", "700", "800"],
+  ]);
+
+  const colHeaders: ColHeaderGroup[] = [
+    {
+      label: "Q1",
+      headers: [
+        { key: "jan", label: "Jan" },
+        { key: "feb", label: "Feb" },
+      ],
+    },
+    {
+      label: "Q2",
+      headers: [
+        { key: "mar", label: "Mar" },
+        { key: "apr", label: "Apr" },
+      ],
+    },
+  ];
+
+  const rowHeaders: RowHeaderGroup[] = [
+    { key: "prodA", label: "Product A", description: "Main product line" },
+    { key: "prodB", label: "Product B", description: "Secondary product" },
+  ];
+
+  return (
+    <ExcelGrid
+      data={data}
+      onChange={setData}
+      colHeaders={colHeaders}
+      rowHeaders={rowHeaders}
+      rowHeaderTitle="Product"
+    />
+  );
+}
+```
+
+## Custom Styling
+
+Use the `styles` prop to customize selection, fill handle, and header styles:
+
+```tsx
+import type { GridStyles } from "react-excel-lite";
+
+const styles: GridStyles = {
+  cell: "text-sm",
+  selected: "bg-purple-100 ring-2 ring-inset ring-purple-500",
+  fillTarget: "bg-purple-50",
+  fillHandle: "bg-purple-500",
+  colGroup: "bg-purple-100 text-purple-700",
+  colHeader: "bg-purple-50",
+  rowHeader: "bg-slate-200",
+};
+
+<ExcelGrid data={data} onChange={setData} styles={styles} />;
+```
+
+Style individual column headers and groups:
+
+```tsx
+const colHeaders: ColHeaderGroup[] = [
+  {
+    label: "Revenue",
+    className: "bg-green-100 text-green-700",
+    headers: [
+      { key: "q1r", label: "Q1", className: "bg-green-50" },
+      { key: "q2r", label: "Q2", className: "bg-green-50" },
+    ],
+  },
+];
+```
+
+Style individual row headers:
+
+```tsx
+const rowHeaders: RowHeaderGroup[] = [
+  {
+    key: "regionA",
+    label: "Region A",
+    className: "bg-slate-700 text-white",
+  },
+];
+```
+
+## Auto Fill (Arithmetic Sequence)
+
+Select cells with a numeric pattern and drag the fill handle to auto-fill:
+
+- `1, 2, 3` → drag down → `4, 5, 6, 7, ...`
+- `100, 200, 300` → drag down → `400, 500, 600, ...`
+- `10, 8, 6` → drag down → `4, 2, 0, -2, ...`
+- Text values → repeats the pattern
+
+## Keyboard Shortcuts
+
+| Shortcut               | Action               |
+| ---------------------- | -------------------- |
+| `Ctrl+C` / `Cmd+C`     | Copy selected cells  |
+| `Ctrl+V` / `Cmd+V`     | Paste from clipboard |
+| `Delete` / `Backspace` | Clear selected cells |
+
+## Exports
+
+### Components
+
+- `ExcelGrid` - Main grid component
+- `GridCell` - Individual cell component
+
+### Hooks
+
+- `useGridSelection` - Cell selection logic
+- `useGridClipboard` - Copy/paste logic
+- `useGridDragFill` - Fill handle logic
+
+### Utilities
+
+- `cn` - Classname merge utility
+- `coordToKey` - Convert coordinate to string key
+- `keyToCoord` - Convert string key to coordinate
+- `getCellsInRange` - Get all cells in a range
+- `isCellInRange` - Check if cell is in range
+- `parseTSV` - Parse TSV string to 2D array
+- `toTSV` - Convert 2D array to TSV string
+- `normalizeRange` - Normalize selection range
+- `getFillTargetCells` - Get fill target cells
+
+### Types
+
+```ts
+interface CellCoord {
+  row: number;
+  col: number;
+}
+
+interface SelectionRange {
+  start: CellCoord | null;
+  end: CellCoord | null;
+}
+
+interface ColHeader {
+  key: string;
+  label: string;
+  description?: string;
+  className?: string;
+}
+
+interface ColHeaderGroup {
+  label: string;
+  headers: ColHeader[];
+  className?: string;
+}
+
+interface RowHeaderGroup {
+  key: string;
+  label: string;
+  description?: string;
+  className?: string;
+}
+
+interface GridStyles {
+  cell?: string;
+  selected?: string;
+  fillTarget?: string;
+  fillHandle?: string;
+  colGroup?: string;
+  colHeader?: string;
+  rowHeader?: string;
+}
+
+interface ExcelGridProps {
+  data: string[][];
+  onChange: (data: string[][]) => void;
+  rowHeaders?: RowHeaderGroup[];
+  colHeaders?: ColHeaderGroup[];
+  className?: string;
+  rowHeaderTitle?: string;
+  styles?: GridStyles;
+}
+```
+
+## Styling
+
+The component uses Tailwind CSS classes. Make sure Tailwind CSS is configured in your project, or override styles using the `styles` prop.

package/dist/components/excel-grid.d.ts

@@ -0,0 +1,3 @@
+import { ExcelGridProps } from '../types';
+export declare function ExcelGrid({ data, onChange, rowHeaders, colHeaders, className, rowHeaderTitle, styles, }: ExcelGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=excel-grid.d.ts.map

package/dist/components/excel-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AAO1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CAwPhB"}

package/dist/components/grid-cell.d.ts

@@ -0,0 +1,3 @@
+import { GridCellProps } from '../types';
+export declare function GridCell({ coord, value, isSelected, isFillTarget, showFillHandle, onMouseDown, onMouseEnter, onChange, onFillHandleMouseDown, styles, }: GridCellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=grid-cell.d.ts.map

package/dist/components/grid-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../src/components/grid-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,MAAM,GACP,EAAE,aAAa,2CAmDf"}

package/dist/hooks/use-grid-clipboard.d.ts

@@ -0,0 +1,19 @@
+import { CellCoord, SelectionRange } from '../types';
+interface UseGridClipboardProps {
+    selection: SelectionRange;
+    getValue: (coord: CellCoord) => string;
+    setValues: (updates: {
+        coord: CellCoord;
+        value: string;
+    }[]) => void;
+    rowCount: number;
+    colCount: number;
+}
+interface UseGridClipboardReturn {
+    handleCopy: () => Promise<void>;
+    handlePaste: () => Promise<void>;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare function useGridClipboard({ selection, getValue, setValues, rowCount, colCount, }: UseGridClipboardProps): UseGridClipboardReturn;
+export {};
+//# sourceMappingURL=use-grid-clipboard.d.ts.map

package/dist/hooks/use-grid-clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-clipboard.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-clipboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,qBAAqB;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACjD;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE,qBAAqB,GAAG,sBAAsB,CAmHhD"}

package/dist/hooks/use-grid-drag-fill.d.ts

@@ -0,0 +1,21 @@
+import { CellCoord, SelectionRange } from '../types';
+interface UseGridDragFillProps {
+    selection: SelectionRange;
+    getValue: (coord: CellCoord) => string;
+    setValues: (updates: {
+        coord: CellCoord;
+        value: string;
+    }[]) => void;
+}
+interface UseGridDragFillReturn {
+    fillSource: CellCoord | null;
+    fillTargets: CellCoord[];
+    isDraggingFill: boolean;
+    isFillTarget: (coord: CellCoord) => boolean;
+    handleFillHandleMouseDown: (sourceCoord: CellCoord) => void;
+    handleCellMouseEnterForFill: (coord: CellCoord) => void;
+    handleFillMouseUp: () => void;
+}
+export declare function useGridDragFill({ selection, getValue, setValues, }: UseGridDragFillProps): UseGridDragFillReturn;
+export {};
+//# sourceMappingURL=use-grid-drag-fill.d.ts.map

package/dist/hooks/use-grid-drag-fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-drag-fill.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-drag-fill.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IACvC,SAAS,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;CACrE;AAED,UAAU,qBAAqB;IAC7B,UAAU,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,SAAS,EAAE,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IAC5C,yBAAyB,EAAE,CAAC,WAAW,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5D,2BAA2B,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AA8CD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,GAAG,qBAAqB,CAwM9C"}

package/dist/hooks/use-grid-selection.d.ts

@@ -0,0 +1,14 @@
+import { CellCoord, SelectionRange } from '../types';
+interface UseGridSelectionReturn {
+    selection: SelectionRange;
+    isSelecting: boolean;
+    isCellSelected: (coord: CellCoord) => boolean;
+    handleCellMouseDown: (coord: CellCoord) => void;
+    handleCellMouseEnter: (coord: CellCoord) => void;
+    handleMouseUp: () => void;
+    clearSelection: () => void;
+    setSelection: (range: SelectionRange) => void;
+}
+export declare function useGridSelection(): UseGridSelectionReturn;
+export {};
+//# sourceMappingURL=use-grid-selection.d.ts.map

package/dist/hooks/use-grid-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-selection.d.ts","sourceRoot":"","sources":["../../src/hooks/use-grid-selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1D,UAAU,sBAAsB;IAC9B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IAC9C,mBAAmB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,gBAAgB,IAAI,sBAAsB,CA8DzD"}

package/dist/index.d.ts

@@ -1,2 +1,10 @@
-export {};
+export { ExcelGrid } from './components/excel-grid';
+export { GridCell } from './components/grid-cell';
+export { useGridSelection } from './hooks/use-grid-selection';
+export { useGridClipboard } from './hooks/use-grid-clipboard';
+export { useGridDragFill } from './hooks/use-grid-drag-fill';
+export { cn } from './utils/cn';
+export { formatCurrency, parseCurrency } from './utils/format-utils';
+export { coordToKey, keyToCoord, getCellsInRange, isCellInRange, parseTSV, toTSV, normalizeRange, getFillTargetCells, } from './utils/grid-utils';
+export type { CellCoord, SelectionRange, ColHeader, ColHeaderGroup, RowHeaderGroup, GridStyles, ExcelGridProps, GridCellProps, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,QAAQ,EACR,KAAK,EACL,cAAc,EACd,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/react-excel-lite.js

@@ -1 +1,535 @@
-
+import { jsxs as j, jsx as E } from "react/jsx-runtime";
+import { useState as L, useCallback as x, useEffect as $, useRef as _, useMemo as q } from "react";
+function R(...n) {
+  return n.filter(Boolean).join(" ");
+}
+function on(n) {
+  return `${n.row}-${n.col}`;
+}
+function tn(n) {
+  const [o, e] = n.split("-").map(Number);
+  return { row: o, col: e };
+}
+function en(n, o) {
+  if (!n || !o) return n ? [n] : [];
+  const e = Math.min(n.row, o.row), s = Math.max(n.row, o.row), i = Math.min(n.col, o.col), b = Math.max(n.col, o.col), c = [];
+  for (let f = e; f <= s; f++)
+    for (let a = i; a <= b; a++)
+      c.push({ row: f, col: a });
+  return c;
+}
+function J(n, o) {
+  if (!o.start) return !1;
+  const e = o.end || o.start, s = Math.min(o.start.row, e.row), i = Math.max(o.start.row, e.row), b = Math.min(o.start.col, e.col), c = Math.max(o.start.col, e.col);
+  return n.row >= s && n.row <= i && n.col >= b && n.col <= c;
+}
+function O(n) {
+  return n.split(/\r?\n/).filter((o) => o.trim()).map((o) => o.split("	").map((e) => e.trim()));
+}
+function Q(n) {
+  return n.map((o) => o.join("	")).join(`
+`);
+}
+function B(n) {
+  return !n.start || !n.end ? n : {
+    start: {
+      row: Math.min(n.start.row, n.end.row),
+      col: Math.min(n.start.col, n.end.col)
+    },
+    end: {
+      row: Math.max(n.start.row, n.end.row),
+      col: Math.max(n.start.col, n.end.col)
+    }
+  };
+}
+function ln(n, o) {
+  if (n.row === o.row && n.col === o.col)
+    return [];
+  const e = Math.min(n.row, o.row), s = Math.max(n.row, o.row), i = Math.min(n.col, o.col), b = Math.max(n.col, o.col), c = [];
+  for (let f = e; f <= s; f++)
+    for (let a = i; a <= b; a++)
+      f === n.row && a === n.col || c.push({ row: f, col: a });
+  return c;
+}
+function W() {
+  const [n, o] = L({
+    start: null,
+    end: null
+  }), [e, s] = L(!1), i = x((u) => {
+    o({ start: u, end: u }), s(!0);
+  }, []), b = x(
+    (u) => {
+      e && o((l) => ({ ...l, end: u }));
+    },
+    [e]
+  ), c = x(() => {
+    s(!1);
+  }, []), f = x(() => {
+    o({ start: null, end: null }), s(!1);
+  }, []), a = x(
+    (u) => J(u, n),
+    [n]
+  );
+  return $(() => {
+    const u = () => {
+      e && s(!1);
+    };
+    return window.addEventListener("mouseup", u), () => window.removeEventListener("mouseup", u);
+  }, [e]), {
+    selection: n,
+    isSelecting: e,
+    isCellSelected: a,
+    handleCellMouseDown: i,
+    handleCellMouseEnter: b,
+    handleMouseUp: c,
+    clearSelection: f,
+    setSelection: o
+  };
+}
+function X({
+  selection: n,
+  getValue: o,
+  setValues: e,
+  rowCount: s,
+  colCount: i
+}) {
+  const b = x(() => {
+    const l = B(n);
+    if (!l.start || !l.end) return [];
+    const y = [];
+    for (let C = l.start.row; C <= l.end.row; C++) {
+      const h = [];
+      for (let D = l.start.col; D <= l.end.col; D++)
+        h.push(o({ row: C, col: D }));
+      y.push(h);
+    }
+    return y;
+  }, [n, o]), c = x(async () => {
+    const l = b();
+    if (l.length === 0) return;
+    const y = Q(l);
+    try {
+      await navigator.clipboard.writeText(y);
+    } catch (C) {
+      console.error("Clipboard copy failed:", C);
+    }
+  }, [b]), f = x(async () => {
+    if (n.start)
+      try {
+        const l = await navigator.clipboard.readText(), y = O(l);
+        if (y.length === 0) return;
+        const C = n.start.row, h = n.start.col, D = [];
+        y.forEach((d, M) => {
+          const w = C + M;
+          w >= s || d.forEach((m, v) => {
+            const F = h + v;
+            F >= i || D.push({ coord: { row: w, col: F }, value: m });
+          });
+        }), D.length > 0 && e(D);
+      } catch (l) {
+        console.error("Clipboard paste failed:", l);
+      }
+  }, [n.start, e, s, i]), a = x(() => {
+    const l = B(n);
+    if (!l.start || !l.end) return;
+    const y = [];
+    for (let C = l.start.row; C <= l.end.row; C++)
+      for (let h = l.start.col; h <= l.end.col; h++)
+        y.push({ coord: { row: C, col: h }, value: "" });
+    y.length > 0 && e(y);
+  }, [n, e]), u = x(
+    (l) => {
+      (l.ctrlKey || l.metaKey) && l.key === "c" && (l.preventDefault(), c()), (l.ctrlKey || l.metaKey) && l.key === "v" && (l.preventDefault(), f()), (l.key === "Backspace" || l.key === "Delete") && (l.preventDefault(), a());
+    },
+    [c, f, a]
+  );
+  return {
+    handleCopy: c,
+    handlePaste: f,
+    handleKeyDown: u
+  };
+}
+function Y(n) {
+  if (n.trim() === "") return null;
+  const o = Number(n);
+  return isNaN(o) ? null : o;
+}
+function P(n) {
+  if (n.length === 0) return null;
+  const o = n.map(Y);
+  if (o.some((i) => i === null)) return null;
+  const e = o;
+  if (e.length === 1)
+    return { numbers: e, diff: 0 };
+  const s = e[1] - e[0];
+  for (let i = 2; i < e.length; i++)
+    if (e[i] - e[i - 1] !== s)
+      return { numbers: e, diff: 0 };
+  return { numbers: e, diff: s };
+}
+function Z({
+  selection: n,
+  getValue: o,
+  setValues: e
+}) {
+  const [s, i] = L(null), [b, c] = L([]), [f, a] = L(!1), [u, l] = L(null), y = x((d) => {
+    i(d), a(!0), c([]), l(null);
+  }, []), C = x(
+    (d) => {
+      if (!f || !n.start) return;
+      const M = B(n);
+      if (!M.start || !M.end) return;
+      l(d);
+      const w = {
+        row: Math.min(M.start.row, d.row),
+        col: Math.min(M.start.col, d.col)
+      }, m = {
+        row: Math.max(M.end.row, d.row),
+        col: Math.max(M.end.col, d.col)
+      }, v = [];
+      for (let F = w.row; F <= m.row; F++)
+        for (let r = w.col; r <= m.col; r++)
+          F >= M.start.row && F <= M.end.row && r >= M.start.col && r <= M.end.col || v.push({ row: F, col: r });
+      c(v);
+    },
+    [f, n]
+  ), h = x(() => {
+    if (!n.start || b.length === 0 || !u) {
+      i(null), c([]), a(!1), l(null);
+      return;
+    }
+    const d = B(n);
+    if (!d.start || !d.end) {
+      i(null), c([]), a(!1), l(null);
+      return;
+    }
+    const M = [], w = d.start, m = d.end, v = m.row - w.row + 1, F = m.col - w.col + 1;
+    b.forEach((r) => {
+      let T, k;
+      if (r.row < w.row) {
+        const S = w.row - r.row;
+        T = m.row - (S - 1) % v;
+      } else if (r.row > m.row) {
+        const S = r.row - m.row;
+        T = w.row + (S - 1) % v;
+      } else
+        T = r.row;
+      if (r.col < w.col) {
+        const S = w.col - r.col;
+        k = m.col - (S - 1) % F;
+      } else if (r.col > m.col) {
+        const S = r.col - m.col;
+        k = w.col + (S - 1) % F;
+      } else
+        k = r.col;
+      let z = o({ row: T, col: k });
+      if (r.row !== T && r.col >= w.col && r.col <= m.col) {
+        const S = [];
+        for (let t = w.row; t <= m.row; t++)
+          S.push(o({ row: t, col: r.col }));
+        const g = P(S);
+        if (g && g.diff !== 0) {
+          if (r.row > m.row) {
+            const t = r.row - m.row;
+            z = String(g.numbers[g.numbers.length - 1] + g.diff * t);
+          } else if (r.row < w.row) {
+            const t = w.row - r.row;
+            z = String(g.numbers[0] - g.diff * t);
+          }
+        }
+      }
+      if (r.col !== k && r.row >= w.row && r.row <= m.row) {
+        const S = [];
+        for (let t = w.col; t <= m.col; t++)
+          S.push(o({ row: r.row, col: t }));
+        const g = P(S);
+        if (g && g.diff !== 0) {
+          if (r.col > m.col) {
+            const t = r.col - m.col;
+            z = String(g.numbers[g.numbers.length - 1] + g.diff * t);
+          } else if (r.col < w.col) {
+            const t = w.col - r.col;
+            z = String(g.numbers[0] - g.diff * t);
+          }
+        }
+      }
+      M.push({ coord: r, value: z });
+    }), M.length > 0 && e(M), i(null), c([]), a(!1), l(null);
+  }, [n, b, u, o, e]), D = x(
+    (d) => b.some(
+      (M) => M.row === d.row && M.col === d.col
+    ),
+    [b]
+  );
+  return $(() => {
+    const d = () => {
+      f && h();
+    };
+    return window.addEventListener("mouseup", d), () => window.removeEventListener("mouseup", d);
+  }, [f, h]), {
+    fillSource: s,
+    fillTargets: b,
+    isDraggingFill: f,
+    isFillTarget: D,
+    handleFillHandleMouseDown: y,
+    handleCellMouseEnterForFill: C,
+    handleFillMouseUp: h
+  };
+}
+function V({
+  coord: n,
+  value: o,
+  isSelected: e,
+  isFillTarget: s,
+  showFillHandle: i,
+  onMouseDown: b,
+  onMouseEnter: c,
+  onChange: f,
+  onFillHandleMouseDown: a,
+  styles: u
+}) {
+  const l = (h) => {
+    f(n, h.target.value);
+  }, y = (h) => {
+    h.target.classList.contains("fill-handle") || b(n);
+  }, C = (h) => {
+    h.stopPropagation(), h.preventDefault(), a(n);
+  };
+  return /* @__PURE__ */ j(
+    "td",
+    {
+      className: R(
+        "relative border border-gray-300 p-0",
+        u?.cell,
+        e && (u?.selected ?? "bg-blue-100 ring-2 ring-inset ring-blue-500"),
+        s && (u?.fillTarget ?? "bg-blue-50")
+      ),
+      onMouseDown: y,
+      onMouseEnter: () => c(n),
+      children: [
+        /* @__PURE__ */ E(
+          "input",
+          {
+            type: "text",
+            value: o,
+            onChange: l,
+            className: R(
+              "w-full h-full px-1 py-1 text-right text-xs bg-transparent outline-none cursor-cell",
+              e && "bg-transparent"
+            )
+          }
+        ),
+        i && /* @__PURE__ */ E(
+          "div",
+          {
+            className: R(
+              "fill-handle absolute -bottom-0.5 -right-0.5 w-2 h-2 cursor-crosshair z-20",
+              u?.fillHandle ?? "bg-blue-500"
+            ),
+            onMouseDown: C
+          }
+        )
+      ]
+    }
+  );
+}
+function rn({
+  data: n,
+  onChange: o,
+  rowHeaders: e,
+  colHeaders: s,
+  className: i,
+  rowHeaderTitle: b = "",
+  styles: c
+}) {
+  const f = _(null), a = n.length, u = q(() => s ? s.reduce(
+    (t, p) => t + p.headers.length,
+    0
+  ) : n[0]?.length ?? 0, [s, n]), l = q(() => s ? s.flatMap((t) => t.headers) : [], [s]), y = x(
+    (t) => t.row < 0 || t.row >= a || t.col < 0 || t.col >= u ? "" : n[t.row]?.[t.col] ?? "",
+    [n, a, u]
+  ), C = x(
+    (t, p) => {
+      const N = n.map(
+        (K, G) => G === t.row ? K.map(
+          (I, U) => U === t.col ? p : I
+        ) : K
+      );
+      o(N);
+    },
+    [n, o]
+  ), h = x(
+    (t) => {
+      if (t.length === 0) return;
+      const p = n.map((N) => [...N]);
+      t.forEach(({ coord: N, value: K }) => {
+        N.row >= 0 && N.row < a && N.col >= 0 && N.col < u && (p[N.row][N.col] = K);
+      }), o(p);
+    },
+    [n, o, a, u]
+  ), {
+    selection: D,
+    isSelecting: d,
+    isCellSelected: M,
+    handleCellMouseDown: w,
+    handleCellMouseEnter: m
+  } = W(), { handleKeyDown: v } = X({
+    selection: D,
+    getValue: y,
+    setValues: h,
+    rowCount: a,
+    colCount: u
+  }), {
+    isDraggingFill: F,
+    isFillTarget: r,
+    handleFillHandleMouseDown: T,
+    handleCellMouseEnterForFill: k
+  } = Z({
+    selection: D,
+    getValue: y,
+    setValues: h
+  }), z = x(
+    (t) => {
+      F ? k(t) : d && m(t);
+    },
+    [
+      F,
+      d,
+      k,
+      m
+    ]
+  ), S = x(
+    (t, p) => {
+      C(t, p);
+    },
+    [C]
+  ), g = x(
+    (t) => {
+      if (!D.start) return !1;
+      const p = B(D);
+      return !p.start || !p.end ? !1 : t.row === p.end.row && t.col === p.end.col;
+    },
+    [D]
+  );
+  return /* @__PURE__ */ E(
+    "div",
+    {
+      ref: f,
+      className: R("outline-none overflow-x-auto", i),
+      tabIndex: 0,
+      onKeyDown: v,
+      children: /* @__PURE__ */ j("table", { className: "border-collapse text-xs select-none", children: [
+        /* @__PURE__ */ j("thead", { children: [
+          s && /* @__PURE__ */ j("tr", { children: [
+            e && /* @__PURE__ */ E(
+              "th",
+              {
+                className: R(
+                  "sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1.5 text-center font-medium",
+                  c?.rowHeader
+                ),
+                children: b
+              }
+            ),
+            s.map((t, p) => /* @__PURE__ */ E(
+              "th",
+              {
+                colSpan: t.headers.length,
+                className: R(
+                  "bg-blue-100 border border-gray-300 px-1 py-1.5 text-center font-medium text-blue-700",
+                  c?.colGroup,
+                  t.className
+                ),
+                children: t.label
+              },
+              p
+            ))
+          ] }),
+          s && /* @__PURE__ */ j("tr", { children: [
+            e && /* @__PURE__ */ E(
+              "th",
+              {
+                className: R(
+                  "sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1",
+                  c?.rowHeader
+                )
+              }
+            ),
+            l.map((t) => /* @__PURE__ */ E(
+              "th",
+              {
+                className: R(
+                  "bg-gray-50 border border-gray-300 px-1 py-1 text-center font-medium text-[11px]",
+                  c?.colHeader,
+                  t.className
+                ),
+                title: t.description,
+                children: t.label
+              },
+              t.key
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ E("tbody", { children: n.map((t, p) => /* @__PURE__ */ j("tr", { children: [
+          e && e[p] && /* @__PURE__ */ E(
+            "td",
+            {
+              className: R(
+                "sticky left-0 z-10 bg-gray-100 border border-gray-300 px-1 py-1.5 text-center font-medium",
+                c?.rowHeader,
+                e[p].className
+              ),
+              title: e[p].description,
+              children: e[p].label
+            }
+          ),
+          t.map((N, K) => {
+            const G = { row: p, col: K }, I = M(G), U = r(G), A = g(G);
+            return /* @__PURE__ */ E(
+              V,
+              {
+                coord: G,
+                value: y(G),
+                isSelected: I,
+                isFillTarget: U,
+                showFillHandle: A && !F,
+                onMouseDown: w,
+                onMouseEnter: z,
+                onChange: S,
+                onFillHandleMouseDown: T,
+                styles: c
+              },
+              K
+            );
+          })
+        ] }, p)) })
+      ] })
+    }
+  );
+}
+function sn(n) {
+  const o = typeof n == "string" ? parseFloat(n.replace(/,/g, "")) : n;
+  return isNaN(o) ? "0" : new Intl.NumberFormat("ko-KR").format(o);
+}
+function cn(n) {
+  const o = parseInt(n.replace(/,/g, ""), 10);
+  return isNaN(o) ? 0 : o;
+}
+export {
+  rn as ExcelGrid,
+  V as GridCell,
+  R as cn,
+  on as coordToKey,
+  sn as formatCurrency,
+  en as getCellsInRange,
+  ln as getFillTargetCells,
+  J as isCellInRange,
+  tn as keyToCoord,
+  B as normalizeRange,
+  cn as parseCurrency,
+  O as parseTSV,
+  Q as toTSV,
+  X as useGridClipboard,
+  Z as useGridDragFill,
+  W as useGridSelection
+};

package/dist/react-excel-lite.umd.cjs

@@ -1 +1,2 @@
-(function(n){typeof define=="function"&&define.amd?define(n):n()})((function(){"use strict"}));
+(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.ReactExcelLite={},m.ReactJsxRuntime,m.React))})(this,(function(m,g,s){"use strict";function T(...l){return l.filter(Boolean).join(" ")}function _(l){return`${l.row}-${l.col}`}function Q(l){const[n,o]=l.split("-").map(Number);return{row:n,col:o}}function W(l,n){if(!l||!n)return l?[l]:[];const o=Math.min(l.row,n.row),c=Math.max(l.row,n.row),a=Math.min(l.col,n.col),y=Math.max(l.col,n.col),i=[];for(let w=o;w<=c;w++)for(let u=a;u<=y;u++)i.push({row:w,col:u});return i}function B(l,n){if(!n.start)return!1;const o=n.end||n.start,c=Math.min(n.start.row,o.row),a=Math.max(n.start.row,o.row),y=Math.min(n.start.col,o.col),i=Math.max(n.start.col,o.col);return l.row>=c&&l.row<=a&&l.col>=y&&l.col<=i}function U(l){return l.split(/\r?\n/).filter(n=>n.trim()).map(n=>n.split("	").map(o=>o.trim()))}function P(l){return l.map(n=>n.join("	")).join(`
+`)}function I(l){return!l.start||!l.end?l:{start:{row:Math.min(l.start.row,l.end.row),col:Math.min(l.start.col,l.end.col)},end:{row:Math.max(l.start.row,l.end.row),col:Math.max(l.start.col,l.end.col)}}}function X(l,n){if(l.row===n.row&&l.col===n.col)return[];const o=Math.min(l.row,n.row),c=Math.max(l.row,n.row),a=Math.min(l.col,n.col),y=Math.max(l.col,n.col),i=[];for(let w=o;w<=c;w++)for(let u=a;u<=y;u++)w===l.row&&u===l.col||i.push({row:w,col:u});return i}function $(){const[l,n]=s.useState({start:null,end:null}),[o,c]=s.useState(!1),a=s.useCallback(f=>{n({start:f,end:f}),c(!0)},[]),y=s.useCallback(f=>{o&&n(t=>({...t,end:f}))},[o]),i=s.useCallback(()=>{c(!1)},[]),w=s.useCallback(()=>{n({start:null,end:null}),c(!1)},[]),u=s.useCallback(f=>B(f,l),[l]);return s.useEffect(()=>{const f=()=>{o&&c(!1)};return window.addEventListener("mouseup",f),()=>window.removeEventListener("mouseup",f)},[o]),{selection:l,isSelecting:o,isCellSelected:u,handleCellMouseDown:a,handleCellMouseEnter:y,handleMouseUp:i,clearSelection:w,setSelection:n}}function A({selection:l,getValue:n,setValues:o,rowCount:c,colCount:a}){const y=s.useCallback(()=>{const t=I(l);if(!t.start||!t.end)return[];const S=[];for(let k=t.start.row;k<=t.end.row;k++){const b=[];for(let D=t.start.col;D<=t.end.col;D++)b.push(n({row:k,col:D}));S.push(b)}return S},[l,n]),i=s.useCallback(async()=>{const t=y();if(t.length===0)return;const S=P(t);try{await navigator.clipboard.writeText(S)}catch(k){console.error("Clipboard copy failed:",k)}},[y]),w=s.useCallback(async()=>{if(l.start)try{const t=await navigator.clipboard.readText(),S=U(t);if(S.length===0)return;const k=l.start.row,b=l.start.col,D=[];S.forEach((p,M)=>{const d=k+M;d>=c||p.forEach((h,v)=>{const F=b+v;F>=a||D.push({coord:{row:d,col:F},value:h})})}),D.length>0&&o(D)}catch(t){console.error("Clipboard paste failed:",t)}},[l.start,o,c,a]),u=s.useCallback(()=>{const t=I(l);if(!t.start||!t.end)return;const S=[];for(let k=t.start.row;k<=t.end.row;k++)for(let b=t.start.col;b<=t.end.col;b++)S.push({coord:{row:k,col:b},value:""});S.length>0&&o(S)},[l,o]),f=s.useCallback(t=>{(t.ctrlKey||t.metaKey)&&t.key==="c"&&(t.preventDefault(),i()),(t.ctrlKey||t.metaKey)&&t.key==="v"&&(t.preventDefault(),w()),(t.key==="Backspace"||t.key==="Delete")&&(t.preventDefault(),u())},[i,w,u]);return{handleCopy:i,handlePaste:w,handleKeyDown:f}}function Y(l){if(l.trim()==="")return null;const n=Number(l);return isNaN(n)?null:n}function J(l){if(l.length===0)return null;const n=l.map(Y);if(n.some(a=>a===null))return null;const o=n;if(o.length===1)return{numbers:o,diff:0};const c=o[1]-o[0];for(let a=2;a<o.length;a++)if(o[a]-o[a-1]!==c)return{numbers:o,diff:0};return{numbers:o,diff:c}}function O({selection:l,getValue:n,setValues:o}){const[c,a]=s.useState(null),[y,i]=s.useState([]),[w,u]=s.useState(!1),[f,t]=s.useState(null),S=s.useCallback(p=>{a(p),u(!0),i([]),t(null)},[]),k=s.useCallback(p=>{if(!w||!l.start)return;const M=I(l);if(!M.start||!M.end)return;t(p);const d={row:Math.min(M.start.row,p.row),col:Math.min(M.start.col,p.col)},h={row:Math.max(M.end.row,p.row),col:Math.max(M.end.col,p.col)},v=[];for(let F=d.row;F<=h.row;F++)for(let r=d.col;r<=h.col;r++)F>=M.start.row&&F<=M.end.row&&r>=M.start.col&&r<=M.end.col||v.push({row:F,col:r});i(v)},[w,l]),b=s.useCallback(()=>{if(!l.start||y.length===0||!f){a(null),i([]),u(!1),t(null);return}const p=I(l);if(!p.start||!p.end){a(null),i([]),u(!1),t(null);return}const M=[],d=p.start,h=p.end,v=h.row-d.row+1,F=h.col-d.col+1;y.forEach(r=>{let G,z;if(r.row<d.row){const E=d.row-r.row;G=h.row-(E-1)%v}else if(r.row>h.row){const E=r.row-h.row;G=d.row+(E-1)%v}else G=r.row;if(r.col<d.col){const E=d.col-r.col;z=h.col-(E-1)%F}else if(r.col>h.col){const E=r.col-h.col;z=d.col+(E-1)%F}else z=r.col;let K=n({row:G,col:z});if(r.row!==G&&r.col>=d.col&&r.col<=h.col){const E=[];for(let e=d.row;e<=h.row;e++)E.push(n({row:e,col:r.col}));const x=J(E);if(x&&x.diff!==0){if(r.row>h.row){const e=r.row-h.row;K=String(x.numbers[x.numbers.length-1]+x.diff*e)}else if(r.row<d.row){const e=d.row-r.row;K=String(x.numbers[0]-x.diff*e)}}}if(r.col!==z&&r.row>=d.row&&r.row<=h.row){const E=[];for(let e=d.col;e<=h.col;e++)E.push(n({row:r.row,col:e}));const x=J(E);if(x&&x.diff!==0){if(r.col>h.col){const e=r.col-h.col;K=String(x.numbers[x.numbers.length-1]+x.diff*e)}else if(r.col<d.col){const e=d.col-r.col;K=String(x.numbers[0]-x.diff*e)}}}M.push({coord:r,value:K})}),M.length>0&&o(M),a(null),i([]),u(!1),t(null)},[l,y,f,n,o]),D=s.useCallback(p=>y.some(M=>M.row===p.row&&M.col===p.col),[y]);return s.useEffect(()=>{const p=()=>{w&&b()};return window.addEventListener("mouseup",p),()=>window.removeEventListener("mouseup",p)},[w,b]),{fillSource:c,fillTargets:y,isDraggingFill:w,isFillTarget:D,handleFillHandleMouseDown:S,handleCellMouseEnterForFill:k,handleFillMouseUp:b}}function V({coord:l,value:n,isSelected:o,isFillTarget:c,showFillHandle:a,onMouseDown:y,onMouseEnter:i,onChange:w,onFillHandleMouseDown:u,styles:f}){const t=b=>{w(l,b.target.value)},S=b=>{b.target.classList.contains("fill-handle")||y(l)},k=b=>{b.stopPropagation(),b.preventDefault(),u(l)};return g.jsxs("td",{className:T("relative border border-gray-300 p-0",f?.cell,o&&(f?.selected??"bg-blue-100 ring-2 ring-inset ring-blue-500"),c&&(f?.fillTarget??"bg-blue-50")),onMouseDown:S,onMouseEnter:()=>i(l),children:[g.jsx("input",{type:"text",value:n,onChange:t,className:T("w-full h-full px-1 py-1 text-right text-xs bg-transparent outline-none cursor-cell",o&&"bg-transparent")}),a&&g.jsx("div",{className:T("fill-handle absolute -bottom-0.5 -right-0.5 w-2 h-2 cursor-crosshair z-20",f?.fillHandle??"bg-blue-500"),onMouseDown:k})]})}function Z({data:l,onChange:n,rowHeaders:o,colHeaders:c,className:a,rowHeaderTitle:y="",styles:i}){const w=s.useRef(null),u=l.length,f=s.useMemo(()=>c?c.reduce((e,C)=>e+C.headers.length,0):l[0]?.length??0,[c,l]),t=s.useMemo(()=>c?c.flatMap(e=>e.headers):[],[c]),S=s.useCallback(e=>e.row<0||e.row>=u||e.col<0||e.col>=f?"":l[e.row]?.[e.col]??"",[l,u,f]),k=s.useCallback((e,C)=>{const N=l.map((R,j)=>j===e.row?R.map((L,q)=>q===e.col?C:L):R);n(N)},[l,n]),b=s.useCallback(e=>{if(e.length===0)return;const C=l.map(N=>[...N]);e.forEach(({coord:N,value:R})=>{N.row>=0&&N.row<u&&N.col>=0&&N.col<f&&(C[N.row][N.col]=R)}),n(C)},[l,n,u,f]),{selection:D,isSelecting:p,isCellSelected:M,handleCellMouseDown:d,handleCellMouseEnter:h}=$(),{handleKeyDown:v}=A({selection:D,getValue:S,setValues:b,rowCount:u,colCount:f}),{isDraggingFill:F,isFillTarget:r,handleFillHandleMouseDown:G,handleCellMouseEnterForFill:z}=O({selection:D,getValue:S,setValues:b}),K=s.useCallback(e=>{F?z(e):p&&h(e)},[F,p,z,h]),E=s.useCallback((e,C)=>{k(e,C)},[k]),x=s.useCallback(e=>{if(!D.start)return!1;const C=I(D);return!C.start||!C.end?!1:e.row===C.end.row&&e.col===C.end.col},[D]);return g.jsx("div",{ref:w,className:T("outline-none overflow-x-auto",a),tabIndex:0,onKeyDown:v,children:g.jsxs("table",{className:"border-collapse text-xs select-none",children:[g.jsxs("thead",{children:[c&&g.jsxs("tr",{children:[o&&g.jsx("th",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1.5 text-center font-medium",i?.rowHeader),children:y}),c.map((e,C)=>g.jsx("th",{colSpan:e.headers.length,className:T("bg-blue-100 border border-gray-300 px-1 py-1.5 text-center font-medium text-blue-700",i?.colGroup,e.className),children:e.label},C))]}),c&&g.jsxs("tr",{children:[o&&g.jsx("th",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1",i?.rowHeader)}),t.map(e=>g.jsx("th",{className:T("bg-gray-50 border border-gray-300 px-1 py-1 text-center font-medium text-[11px]",i?.colHeader,e.className),title:e.description,children:e.label},e.key))]})]}),g.jsx("tbody",{children:l.map((e,C)=>g.jsxs("tr",{children:[o&&o[C]&&g.jsx("td",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-1 py-1.5 text-center font-medium",i?.rowHeader,o[C].className),title:o[C].description,children:o[C].label}),e.map((N,R)=>{const j={row:C,col:R},L=M(j),q=r(j),nl=x(j);return g.jsx(V,{coord:j,value:S(j),isSelected:L,isFillTarget:q,showFillHandle:nl&&!F,onMouseDown:d,onMouseEnter:K,onChange:E,onFillHandleMouseDown:G,styles:i},R)})]},C))})]})})}function H(l){const n=typeof l=="string"?parseFloat(l.replace(/,/g,"")):l;return isNaN(n)?"0":new Intl.NumberFormat("ko-KR").format(n)}function ll(l){const n=parseInt(l.replace(/,/g,""),10);return isNaN(n)?0:n}m.ExcelGrid=Z,m.GridCell=V,m.cn=T,m.coordToKey=_,m.formatCurrency=H,m.getCellsInRange=W,m.getFillTargetCells=X,m.isCellInRange=B,m.keyToCoord=Q,m.normalizeRange=I,m.parseCurrency=ll,m.parseTSV=U,m.toTSV=P,m.useGridClipboard=A,m.useGridDragFill=O,m.useGridSelection=$,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/types.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Cell coordinate
+ */
+export interface CellCoord {
+    row: number;
+    col: number;
+}
+/**
+ * Selection range
+ */
+export interface SelectionRange {
+    start: CellCoord | null;
+    end: CellCoord | null;
+}
+/**
+ * Column header definition
+ */
+export interface ColHeader {
+    key: string;
+    label: string;
+    description?: string;
+    /** Custom class name for this header cell */
+    className?: string;
+}
+/**
+ * Column header group
+ */
+export interface ColHeaderGroup {
+    label: string;
+    headers: ColHeader[];
+    /** Custom class name for this group header */
+    className?: string;
+}
+/**
+ * Row header group
+ */
+export interface RowHeaderGroup {
+    key: string;
+    label: string;
+    description?: string;
+    /** Custom class name for this row header */
+    className?: string;
+}
+/**
+ * Grid styles configuration
+ */
+export interface GridStyles {
+    /** Data cell style */
+    cell?: string;
+    /** Selected cell style */
+    selected?: string;
+    /** Fill target cell style (when dragging fill handle) */
+    fillTarget?: string;
+    /** Fill handle style (bottom-right corner handle) */
+    fillHandle?: string;
+    /** Column group header style */
+    colGroup?: string;
+    /** Column header style */
+    colHeader?: string;
+    /** Row header style */
+    rowHeader?: string;
+}
+/**
+ * Grid Props
+ */
+export interface ExcelGridProps {
+    /** 2D string array data */
+    data: string[][];
+    /** Data change callback */
+    onChange: (data: string[][]) => void;
+    /** Row header definitions (overridable per row) */
+    rowHeaders?: RowHeaderGroup[];
+    /** Column header group definitions */
+    colHeaders?: ColHeaderGroup[];
+    /** Additional class name for container */
+    className?: string;
+    /** Row header column title */
+    rowHeaderTitle?: string;
+    /** Style configuration */
+    styles?: GridStyles;
+}
+/**
+ * Cell component Props
+ */
+export interface GridCellProps {
+    coord: CellCoord;
+    value: string;
+    isSelected: boolean;
+    isFillTarget: boolean;
+    showFillHandle: boolean;
+    onMouseDown: (coord: CellCoord) => void;
+    onMouseEnter: (coord: CellCoord) => void;
+    onChange: (coord: CellCoord, value: string) => void;
+    onFillHandleMouseDown: (coord: CellCoord) => void;
+    /** Cell styles */
+    styles?: Pick<GridStyles, "cell" | "selected" | "fillTarget" | "fillHandle">;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,SAAS,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,sCAAsC;IACtC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CAC9E"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Classname merge utility (simplified version)
+ * Filters out falsy values and joins classnames with space
+ */
+export declare function cn(...classes: (string | boolean | undefined | null)[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,EAAE,CAChB,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,GAClD,MAAM,CAER"}

package/dist/utils/format-utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Format number with thousand separators
+ * @param value Number to format
+ * @returns Formatted string (e.g., 1000000 -> "1,000,000")
+ */
+export declare function formatCurrency(value: number | string): string;
+/**
+ * Parse string with thousand separators to number
+ * @param value String to parse
+ * @returns Number (e.g., "1,000,000" -> 1000000)
+ */
+export declare function parseCurrency(value: string): number;
+//# sourceMappingURL=format-utils.d.ts.map

package/dist/utils/format-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-utils.d.ts","sourceRoot":"","sources":["../../src/utils/format-utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAK7D;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGnD"}

package/dist/utils/grid-utils.d.ts

@@ -0,0 +1,34 @@
+import { CellCoord, SelectionRange } from '../types';
+/**
+ * Convert coordinate to string key
+ */
+export declare function coordToKey(coord: CellCoord): string;
+/**
+ * Convert string key to coordinate
+ */
+export declare function keyToCoord(key: string): CellCoord;
+/**
+ * Get all cell coordinates between two coordinates
+ */
+export declare function getCellsInRange(start: CellCoord | null, end: CellCoord | null): CellCoord[];
+/**
+ * Check if cell is within selection range
+ */
+export declare function isCellInRange(coord: CellCoord, range: SelectionRange): boolean;
+/**
+ * Parse TSV (Tab-Separated Values) string - supports Excel copy
+ */
+export declare function parseTSV(text: string): string[][];
+/**
+ * Convert 2D array to TSV string
+ */
+export declare function toTSV(data: string[][]): string;
+/**
+ * Normalize selection range (start is always top-left)
+ */
+export declare function normalizeRange(range: SelectionRange): SelectionRange;
+/**
+ * Calculate fill target cells (2D area support - excludes source cell)
+ */
+export declare function getFillTargetCells(source: CellCoord, target: CellCoord): CellCoord[];
+//# sourceMappingURL=grid-utils.d.ts.map

package/dist/utils/grid-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-utils.d.ts","sourceRoot":"","sources":["../../src/utils/grid-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1D;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM,CAEnD;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAGjD;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,EACvB,GAAG,EAAE,SAAS,GAAG,IAAI,GACpB,SAAS,EAAE,CAeb;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,cAAc,GACpB,OAAO,CAeT;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,CAKjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,GAAG,MAAM,CAE9C;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,cAAc,CAapE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,SAAS,EACjB,MAAM,EAAE,SAAS,GAChB,SAAS,EAAE,CAsBb"}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "react-excel-lite",
-  "version": "0.0.1",
-  "description": "Simple Excel-like editable grid component for React.",
+  "version": "0.0.4",
+  "description": "A lightweight, Excel-like editable grid component for React with cell selection, copy/paste, auto-fill with arithmetic sequence detection, and customizable styling.",
+  "license": "MIT",
   "type": "module",
   "main": "./dist/react-excel-lite.umd.cjs",
   "module": "./dist/react-excel-lite.js",
@@ -22,7 +23,8 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=3.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^5.1.1",