react-gridix 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,299 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ComponentType } from 'react';
+import { CSSProperties } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+
+export declare function Alert({ tone, title, onClose, className, children, ...rest }: AlertProps): JSX_2.Element;
+
+export declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    tone?: "info" | "success" | "warning" | "danger";
+    title?: ReactNode;
+    onClose?: () => void;
+}
+
+declare type AnyRow = Record<string, any>;
+
+export declare function Badge({ tone, className, children, ...rest }: BadgeProps): JSX_2.Element;
+
+export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
+}
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+}
+
+export declare function Card({ title, footer, className, children, ...rest }: CardProps): JSX_2.Element;
+
+export declare interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: ReactNode;
+    footer?: ReactNode;
+}
+
+export declare interface CellEditableParams<T = Record<string, any>> {
+    /** The raw value stored in the row. */
+    value: unknown;
+    /** The value as text, after `valueFormatter`. */
+    formattedValue: string;
+    row: T;
+    rowIndex: number;
+    field: string;
+    column: ColumnDef<T>;
+}
+
+export declare interface CellEditEvent<T> {
+    rowId: string | number;
+    rowIndex: number;
+    field: string;
+    oldValue: unknown;
+    newValue: unknown;
+    row: T;
+}
+
+/** Props received by a column's `cellEditor` component. */
+export declare interface CellEditorProps<T = Record<string, any>> {
+    /** The current draft value (starts as the cell's raw value). */
+    value: unknown;
+    row: T;
+    rowIndex: number;
+    field: string;
+    column: ColumnDef<T>;
+    /** Update the draft value without saving it. */
+    onChange: (value: unknown) => void;
+    /**
+     * Save and close the editor. Pass the value to save, or call with no value to save the
+     * current draft. `move` also starts editing the neighbouring cell ("down" and so on).
+     */
+    onCommit: (value?: unknown, move?: MoveDirection) => void;
+    /** Close the editor without saving. */
+    onCancel: () => void;
+}
+
+export declare interface CellParams<T = Record<string, any>> extends CellEditableParams<T> {
+    /** Whether this cell may be changed (the column's `editable` setting, or the grid's). */
+    editable: boolean;
+    /**
+     * Saves a new value for this cell straight away, without opening the editor. It runs `validate`
+     * and fires `onCellEdit` / `onRowsChange` like any edit. Returns false if the value was rejected
+     * or the cell is not editable.
+     */
+    updateValue: (value: unknown) => boolean;
+}
+
+export declare function Checkbox({ checked, onChange, indeterminate, variant, disabled, label, "aria-label": ariaLabel, id, name, indicator, className, style, classNames, styles, }: CheckboxProps): JSX_2.Element;
+
+export declare interface CheckboxProps {
+    checked: boolean;
+    /** Called once per click (or Space key press) with the new value. */
+    onChange: (checked: boolean) => void;
+    /**
+     * Shows the mixed ("some are selected") state, with a dash instead of a tick. Use it together
+     * with `checked={false}`. Clicking a mixed checkbox calls `onChange(true)`.
+     */
+    indeterminate?: boolean;
+    /** Default `"native"`. */
+    variant?: CheckboxVariant;
+    disabled?: boolean;
+    /** Text next to the box. Clicking it toggles the checkbox. */
+    label?: ReactNode;
+    /** Accessible name when there is no visible `label`. */
+    "aria-label"?: string;
+    id?: string;
+    /** Only used by the `"native"` variant. */
+    name?: string;
+    /** Replaces what is drawn inside the `"button"` and `"tick"` variants (for example `"★"` or your own icon). */
+    indicator?: ReactNode;
+    /** Classes for the root element (same as `classNames.root`). */
+    className?: string;
+    /** Inline styles for the root element (same as `styles.root`). */
+    style?: CSSProperties;
+    /** Classes per part. */
+    classNames?: Partial<Record<CheckboxSlot, string>>;
+    /** Inline styles per part. */
+    styles?: Partial<Record<CheckboxSlot, CSSProperties>>;
+}
+
+export declare type CheckboxSlot = "root" | "control" | "indicator" | "label";
+
+/**
+ * - `"button"`: a `<button>` box with a `<span>` inside that is shown when checked.
+ * - `"tick"`: a `<button>` box that fills in and shows a tick when checked.
+ * - `"native"`: the browser's own `<input type="checkbox">`.
+ */
+export declare type CheckboxVariant = "button" | "tick" | "native";
+
+/** Options for the checkbox drawn in a `type: "boolean"` column. */
+export declare interface ColumnCheckboxOptions {
+    /** Overrides the grid's `checkboxVariant` for this column. */
+    variant?: CheckboxVariant;
+    /** Replaces what is drawn inside the `"button"` and `"tick"` variants. */
+    indicator?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: Partial<Record<CheckboxSlot, string>>;
+    styles?: Partial<Record<CheckboxSlot, CSSProperties>>;
+}
+
+export declare interface ColumnDef<T = Record<string, any>> {
+    /** Key of the row object this column reads and writes. */
+    field: keyof T & string;
+    /** Text shown in the header. Defaults to the field name. */
+    headerName?: string;
+    /**
+     * "number" columns sort numerically and parse edits as numbers.
+     * "boolean" columns show a checkbox that toggles with one click (see `checkbox`).
+     */
+    type?: "text" | "number" | "boolean";
+    width?: number | string;
+    minWidth?: number | string;
+    align?: "left" | "center" | "right";
+    /** Overrides the grid-level `sortable`. */
+    sortable?: boolean;
+    /** Overrides the grid-level `columnFilters`. */
+    filterable?: boolean;
+    /**
+     * `true` / `false`, or a function that decides per cell. Overrides the grid-level `editable`.
+     * Example: `editable: ({ row }) => row.status !== "locked"`.
+     */
+    editable?: boolean | ((params: CellEditableParams<T>) => boolean);
+    /** Text used for display, global search and filtering. */
+    valueFormatter?: (value: any, row: T) => string;
+    /** Turns the typed text into the stored value. */
+    valueParser?: (text: string, row: T) => unknown;
+    /** Return false to reject an edit. The editor stays open and is marked invalid. */
+    validate?: (value: unknown, row: T) => boolean;
+    /** Custom sort. Return a negative, zero or positive number. */
+    comparator?: (a: any, b: any, rowA: T, rowB: T) => number;
+    /** A React component that renders the cell content. Define it outside render so it keeps its identity. */
+    cellRenderer?: ComponentType<CellParams<T>>;
+    /** A React component used instead of the text box when editing this column. */
+    cellEditor?: ComponentType<CellEditorProps<T>>;
+    /** A React component that renders the header label (the sort arrow is still added). */
+    headerRenderer?: ComponentType<HeaderRendererProps<T>>;
+    /** A React component that replaces the filter text box under the header. */
+    filterRenderer?: ComponentType<FilterRendererProps<T>>;
+    headerClassName?: string;
+    headerStyle?: CSSProperties;
+    cellClassName?: string | ((params: CellParams<T>) => string);
+    cellStyle?: CSSProperties | ((params: CellParams<T>) => CSSProperties);
+    /** Look of the checkbox in a `type: "boolean"` column. */
+    checkbox?: ColumnCheckboxOptions;
+    /**
+     * For `type: "boolean"` columns: draws a checkbox in the header, with the header name as its
+     * label. Clicking it checks every row that matches the current search and filters (all pages),
+     * or unchecks them all when they are already checked. It shows a mixed state when only some
+     * are checked. Ignored when the column has a `headerRenderer`.
+     */
+    headerCheckbox?: boolean;
+}
+
+export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, sortable, defaultSort, onSortChange, searchable, searchPlaceholder, columnFilters, pagination, paginationPosition, pageSize: initialPageSize, pageSizeOptions, onRowClick, toolbar, emptyMessage, striped, checkboxVariant, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
+
+export declare interface DataGridProps<T = Record<string, any>> {
+    columns: ColumnDef<T>[];
+    rows: T[];
+    /** Stable id for each row. Defaults to the row's index in `rows`. */
+    getRowId?: (row: T, index: number) => string | number;
+    /** Allow editing cells (double-click, Enter/F2, or just start typing). Default false. */
+    editable?: boolean;
+    /**
+     * After Enter saves a cell, start editing the cell below (Shift+Enter: the cell above).
+     * Tab and Shift+Tab move across the row. Default true.
+     */
+    enterMovesDown?: boolean;
+    /** Fires after a cell edit is committed. */
+    onCellEdit?: (event: CellEditEvent<T>) => void;
+    /** Fires with the full updated array after a cell edit. Handy for `setRows`. */
+    onRowsChange?: (rows: T[]) => void;
+    /** Header click sorting. Default true. */
+    sortable?: boolean;
+    /** Uncontrolled initial sort. */
+    defaultSort?: SortModel | null;
+    onSortChange?: (sort: SortModel | null) => void;
+    /** Global search box above the grid. Default true. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Per-column filter inputs under the header. Default true. */
+    columnFilters?: boolean;
+    /** Default true. */
+    pagination?: boolean;
+    /** Where the row count and page controls go: "bottom" (default), "top" or "both". */
+    paginationPosition?: PaginationPosition;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /** Extra content on the right side of the toolbar. */
+    toolbar?: ReactNode;
+    emptyMessage?: ReactNode;
+    striped?: boolean;
+    /** Checkbox style for `type: "boolean"` columns: "button", "tick" or "native" (default). */
+    checkboxVariant?: CheckboxVariant;
+    /** Makes the body scroll with a sticky header, e.g. 400 or "60vh". */
+    maxHeight?: number | string;
+    /** Tailwind or any CSS classes for the root element. */
+    className?: string;
+    /** Inline styles for the root element. */
+    style?: CSSProperties;
+    /** Classes per part of the grid. */
+    classNames?: Partial<Record<GridSlot, string>>;
+    /** Inline styles per part of the grid. */
+    styles?: Partial<Record<GridSlot, CSSProperties>>;
+    rowClassName?: string | ((row: T, rowIndex: number) => string);
+    rowStyle?: CSSProperties | ((row: T, rowIndex: number) => CSSProperties);
+}
+
+/** Props received by a column's `filterRenderer` component. */
+export declare interface FilterRendererProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterRow" | "filterCell" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator";
+
+/** Props received by a column's `headerRenderer` component. */
+export declare interface HeaderRendererProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    sortDirection: SortDirection | null;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+
+export declare function Modal({ open, onClose, title, footer, children }: ModalProps): ReactPortal | null;
+
+export declare interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+}
+
+export declare type MoveDirection = "down" | "up" | "left" | "right" | "none";
+
+export declare type PaginationPosition = "bottom" | "top" | "both";
+
+export declare type SortDirection = "asc" | "desc";
+
+export declare interface SortModel {
+    field: string;
+    direction: SortDirection;
+}
+
+export { }

package/dist/react-gridix.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),h=require("react"),Ue=require("react-dom"),Xe=h.forwardRef(function({variant:d="primary",size:c="md",loading:k=!1,disabled:_,className:b,children:p,...m},D){const v=["rk-btn",`rk-btn--${d}`,`rk-btn--${c}`,b].filter(Boolean).join(" ");return l.jsxs("button",{ref:D,className:v,disabled:_||k,"aria-busy":k||void 0,...m,children:[k&&l.jsx("span",{className:"rk-spinner","aria-hidden":"true"}),p]})}),Ze=h.forwardRef(function({label:d,error:c,hint:k,id:_,className:b,...p},m){const D=h.useId(),v=_??D,C=c||k?`${v}-desc`:void 0;return l.jsxs("div",{className:["rk-field",b].filter(Boolean).join(" "),children:[d&&l.jsx("label",{className:"rk-label",htmlFor:v,children:d}),l.jsx("input",{ref:m,id:v,className:`rk-input${c?" rk-input--error":""}`,"aria-invalid":c?!0:void 0,"aria-describedby":C,...p}),(c||k)&&l.jsx("span",{id:C,className:c?"rk-error-text":"rk-hint",children:c??k})]})});function et({title:i,footer:d,className:c,children:k,..._}){return l.jsxs("div",{className:["rk-card",c].filter(Boolean).join(" "),..._,children:[i&&l.jsx("div",{className:"rk-card__header",children:i}),l.jsx("div",{className:"rk-card__body",children:k}),d&&l.jsx("div",{className:"rk-card__footer",children:d})]})}function tt({tone:i="neutral",className:d,children:c,...k}){return l.jsx("span",{className:["rk-badge",`rk-badge--${i}`,d].filter(Boolean).join(" "),...k,children:c})}function rt({tone:i="info",title:d,onClose:c,className:k,children:_,...b}){return l.jsxs("div",{role:i==="danger"||i==="warning"?"alert":"status",className:["rk-alert",`rk-alert--${i}`,k].filter(Boolean).join(" "),...b,children:[l.jsxs("div",{className:"rk-alert__content",children:[d&&l.jsx("strong",{className:"rk-alert__title",children:d}),l.jsx("div",{children:_})]}),c&&l.jsx("button",{type:"button",className:"rk-alert__close","aria-label":"Dismiss",onClick:c,children:"×"})]})}function nt({open:i,onClose:d,title:c,footer:k,children:_}){const b=h.useId(),p=h.useRef(null);return h.useEffect(()=>{var C;if(!i)return;const m=document.activeElement;(C=p.current)==null||C.focus();const D=M=>{M.key==="Escape"&&d()};document.addEventListener("keydown",D);const v=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{var M;document.removeEventListener("keydown",D),document.body.style.overflow=v,(M=m==null?void 0:m.focus)==null||M.call(m)}},[i,d]),!i||typeof document>"u"?null:Ue.createPortal(l.jsx("div",{className:"rk-overlay",onMouseDown:m=>m.target===m.currentTarget&&d(),children:l.jsxs("div",{ref:p,role:"dialog","aria-modal":"true","aria-labelledby":c?b:void 0,tabIndex:-1,className:"rk-modal",children:[c&&l.jsxs("div",{className:"rk-modal__header",children:[l.jsx("h2",{id:b,className:"rk-modal__title",children:c}),l.jsx("button",{type:"button",className:"rk-alert__close","aria-label":"Close",onClick:d,children:"×"})]}),l.jsx("div",{className:"rk-modal__body",children:_}),k&&l.jsx("div",{className:"rk-modal__footer",children:k})]})}),document.body)}const H=(...i)=>i.filter(Boolean).join(" ");function lt(){return l.jsx("svg",{viewBox:"0 0 16 16",width:"100%",height:"100%","aria-hidden":"true",focusable:"false",children:l.jsx("path",{d:"M3.5 8.5l3 3 6-7",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round",strokeLinejoin:"round"})})}function it(){return l.jsx("svg",{viewBox:"0 0 16 16",width:"100%",height:"100%","aria-hidden":"true",focusable:"false",children:l.jsx("path",{d:"M4 8h8",fill:"none",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round"})})}function fe({checked:i,onChange:d,indeterminate:c=!1,variant:k="native",disabled:_=!1,label:b,"aria-label":p,id:m,name:D,indicator:v,className:C,style:M,classNames:P={},styles:j={}}){const S=c?"indeterminate":i?"checked":"unchecked";return l.jsxs("label",{className:H("rk-checkbox",`rk-checkbox--${k}`,S==="checked"&&"rk-checkbox--checked",c&&"rk-checkbox--indeterminate",_&&"rk-checkbox--disabled",P.root,C),style:{...j.root,...M},"data-state":S,children:[k==="native"?l.jsx("input",{type:"checkbox",id:m,name:D,ref:K=>{K&&(K.indeterminate=c)},className:H("rk-checkbox__control",P.control),style:j.control,checked:i,disabled:_,"aria-label":p,"data-state":S,onChange:K=>d(K.target.checked)}):l.jsx("button",{type:"button",role:"checkbox",id:m,className:H("rk-checkbox__control",P.control),style:j.control,"aria-checked":c?"mixed":i,"aria-label":p,disabled:_,"data-state":S,onClick:()=>d(!i),children:l.jsx("span",{className:H("rk-checkbox__indicator",v!==void 0&&!c&&"rk-checkbox__indicator--custom",P.indicator),style:j.indicator,"data-state":S,"aria-hidden":"true",children:c?k==="tick"?l.jsx(it,{}):null:v!==void 0?v:k==="tick"?l.jsx(lt,{}):null})}),b!=null&&l.jsx("span",{className:H("rk-checkbox__label",P.label),style:j.label,children:b})]})}const T=(...i)=>i.filter(Boolean).join(" "),Se=(i,d)=>`${typeof i}:${i}\0${d}`;function ue(i,d){const c=d[i.field];return i.valueFormatter?i.valueFormatter(c,d):i.type==="boolean"&&typeof c=="boolean"?c?"Yes":"No":c==null?"":c instanceof Date?c.toLocaleDateString():String(c)}function ot(i,d){return typeof i=="number"&&typeof d=="number"?i-d:i instanceof Date&&d instanceof Date?i.getTime()-d.getTime():typeof i=="boolean"&&typeof d=="boolean"?Number(i)-Number(d):String(i).localeCompare(String(d),void 0,{numeric:!0,sensitivity:"base"})}function at({columns:i,rows:d,getRowId:c,editable:k=!1,enterMovesDown:_=!0,onCellEdit:b,onRowsChange:p,sortable:m=!0,defaultSort:D=null,onSortChange:v,searchable:C=!0,searchPlaceholder:M="Search…",columnFilters:P=!0,pagination:j=!0,paginationPosition:S="bottom",pageSize:K=10,pageSizeOptions:ne=[5,10,25,50],onRowClick:le,toolbar:he,emptyMessage:Ie="No rows to show",striped:Be=!1,checkboxVariant:Te="native",maxHeight:ke,className:$e,style:Me,classNames:I={},styles:w={},rowClassName:ie,rowStyle:oe}){const g=(e,t)=>({className:T(t,I[e]),style:w[e]}),[xe,be]=h.useState(d),V=h.useRef(d);h.useEffect(()=>{V.current=d,be(d)},[d]);const ge=e=>{V.current=e,be(e)},[J,Pe]=h.useState(""),[A,me]=h.useState({}),[N,Ke]=h.useState(D),[Re,q]=h.useState(0),[B,Fe]=h.useState(K),[z,W]=h.useState(null),R=h.useRef(0),Q=h.useRef(null),ae=h.useRef(new Map),pe=h.useMemo(()=>xe.map((e,t)=>({row:e,index:t,id:c?c(e,t):t})),[xe,c]),G=h.useMemo(()=>{const e=J.trim().toLowerCase(),t=Object.entries(A).filter(([,n])=>n.trim()!=="");let r=pe.filter(({row:n})=>e&&!i.some(s=>ue(s,n).toLowerCase().includes(e))?!1:t.every(([o,s])=>{const f=i.find(a=>a.field===o);return f?ue(f,n).toLowerCase().includes(s.trim().toLowerCase()):!0}));if(N){const n=i.find(o=>o.field===N.field);if(n){const o=N.direction==="asc"?1:-1;r=[...r].sort((s,f)=>{const a=s.row[n.field],u=f.row[n.field],x=a==null||a==="",y=u==null||u==="";return x||y?x===y?0:x?1:-1:(n.comparator?n.comparator(a,u,s.row,f.row):ot(a,u))*o})}}return r},[pe,i,J,A,N]);h.useEffect(()=>q(0),[J,A,N,B]);const F=G.length,O=j?Math.max(1,Math.ceil(F/B)):1,E=Math.min(Re,O-1),$=j?G.slice(E*B,E*B+B):G,Le=F===0?0:j?E*B+1:1,Ve=j?Math.min(F,(E+1)*B):F,_e=e=>e.sortable??m,ve=e=>e.filterable??P,U=(e,t,r)=>({value:t[e.field],formattedValue:ue(e,t),row:t,rowIndex:r,field:e.field,column:e}),se=(e,t)=>{const r=e.editable??k;return typeof r=="function"?r(t):!!r},X=(e,t)=>se(e,t)&&!(e.type==="boolean"&&!e.cellEditor),Ae=(e,t)=>{const r=U(e,t.row,t.index),n=se(e,r);return{...r,editable:n,updateValue:o=>n&&ye(t,e,{value:o})}},je=e=>{if(!_e(e))return;let t;!N||N.field!==e.field?t={field:e.field,direction:"asc"}:N.direction==="asc"?t={field:e.field,direction:"desc"}:t=null,Ke(t),v==null||v(t)},Z=(e,t)=>{var r;return(r=ae.current.get(Se(e,t)))==null?void 0:r.focus()},L=()=>{R.current+=1,W(null)},ee=(e,t,r={})=>{if(!X(t,U(t,e.row,e.index)))return!1;const n=e.row[t.field],o=t.cellEditor?n:r.text??(n==null?"":String(n));return Q.current=o,R.current+=1,W({id:e.id,field:t.field,draft:o,session:R.current,select:r.select??"end",invalid:!1}),!0},ye=(e,t,r)=>{const n=V.current[e.index]??e.row,o=n[t.field];let s;if("value"in r)s=r.value;else if(t.valueParser)s=t.valueParser(r.text,n);else if(t.type==="number")if(r.text.trim()==="")s=null;else{const u=Number(r.text);if(!Number.isFinite(u))return!1;s=u}else s=r.text;if(Object.is(s,o))return!0;if(t.validate&&!t.validate(s,n))return!1;const f={...n,[t.field]:s},a=V.current.map((u,x)=>x===e.index?f:u);return ge(a),b==null||b({rowId:e.id,rowIndex:e.index,field:t.field,oldValue:o,newValue:s,row:f}),p==null||p(a),!0},Ne=(e,t,r)=>{const n=$.findIndex(x=>x.id===e.id),o=i.findIndex(x=>x.field===t);if(n<0||o<0)return null;const s=(x,y)=>X(y,U(y,x.row,x.index));if(r==="down"||r==="up"){const x=r==="down"?1:-1;for(let y=n+x;y>=0&&y<$.length;y+=x)if(s($[y],i[o]))return{entry:$[y],col:i[o]};return null}const f=r==="right"?1:-1;let a=n,u=o+f;for(;a>=0&&a<$.length;){for(;u>=0&&u<i.length;){if(s($[a],i[u]))return{entry:$[a],col:i[u]};u+=f}a+=f,u=f>0?0:i.length-1}return null},Y=(e,t,r,n={})=>{const{move:o="none",focus:s=!0}=n;if(!ye(e,t,r))return W(a=>a&&{...a,invalid:!0}),!1;const f=o==="none"?null:Ne(e,t.field,o);return f?ee(f.entry,f.col,{select:"all"}):(L(),s&&Z(e.id,t.field)),!0},qe=(e,t,r)=>{if(e.nativeEvent.isComposing)return;const n=e.currentTarget.value;if(e.key==="Enter"){e.preventDefault();const o=_?e.shiftKey?"up":"down":"none";Y(t,r,{text:n},{move:o})}else if(e.key==="Escape")e.preventDefault(),L(),Z(t.id,r.field);else if(e.key==="Tab"){const o=e.shiftKey?"left":"right";Ne(t,r.field,o)&&(e.preventDefault(),Y(t,r,{text:n},{move:o}))}},ze=(e,t,r,n)=>{e.target!==e.currentTarget||!X(r,n)||(e.key==="Enter"||e.key==="F2"?(e.preventDefault(),ee(t,r)):!r.cellEditor&&e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),ee(t,r,{text:e.key})))},We=(e,t,r)=>t.cellEditor?l.jsx("div",{className:"rk-grid__custom-editor",onBlur:n=>{n.currentTarget.contains(n.relatedTarget)||r.session===R.current&&(Y(e,t,{value:Q.current},{focus:!1})||L())},onKeyDown:n=>{n.key==="Escape"&&(n.preventDefault(),n.stopPropagation(),L(),Z(e.id,t.field))},children:h.createElement(t.cellEditor,{value:r.draft,row:e.row,rowIndex:e.index,field:t.field,column:t,onChange:n=>{Q.current=n,W(o=>o&&o.session===r.session?{...o,draft:n,invalid:!1}:o)},onCommit:(n,o="none")=>{r.session===R.current&&Y(e,t,{value:n===void 0?Q.current:n},{move:o})},onCancel:()=>{L(),Z(e.id,t.field)}})}):l.jsx("input",{autoFocus:!0,className:T("rk-grid__editor",r.invalid&&"rk-grid__editor--invalid",I.editor),style:{textAlign:t.align,...w.editor},value:r.draft===null||r.draft===void 0?"":String(r.draft),inputMode:t.type==="number"?"decimal":void 0,"aria-label":`Edit ${t.headerName??t.field}`,"aria-invalid":r.invalid||void 0,onChange:n=>{const o=n.target.value;W(s=>s&&{...s,draft:o,invalid:!1})},onFocus:n=>{const o=n.currentTarget;r.select==="all"?o.select():o.setSelectionRange(o.value.length,o.value.length)},onBlur:n=>{r.session===R.current&&(Y(e,t,{text:n.currentTarget.value},{focus:!1})||L())},onKeyDown:n=>qe(n,e,t)}),we=e=>{var r,n,o,s,f,a,u,x;const t=e.checkbox??{};return{variant:t.variant??Te,indicator:t.indicator,className:t.className,style:t.style,classNames:{root:T(I.checkbox,(r=t.classNames)==null?void 0:r.root),control:T(I.checkboxControl,(n=t.classNames)==null?void 0:n.control),indicator:T(I.checkboxIndicator,(o=t.classNames)==null?void 0:o.indicator),label:(s=t.classNames)==null?void 0:s.label},styles:{root:{...w.checkbox,...(f=t.styles)==null?void 0:f.root},control:{...w.checkboxControl,...(a=t.styles)==null?void 0:a.control},indicator:{...w.checkboxIndicator,...(u=t.styles)==null?void 0:u.indicator},label:(x=t.styles)==null?void 0:x.label}}},te=e=>e.stopPropagation(),Ge=(e,t)=>l.jsx("span",{className:"rk-grid__checkbox-cell",onClick:te,onDoubleClick:te,children:l.jsx(fe,{...we(e),checked:!!t.value,disabled:!t.editable,"aria-label":`Toggle ${e.headerName??e.field}`,onChange:r=>t.updateValue(r)})}),Ee=e=>G.filter(t=>se(e,U(e,t.row,t.index))),Oe=(e,t)=>{const r=new Map(Ee(e).map(s=>[s.index,s])),n=[],o=V.current.map((s,f)=>{const a=r.get(f);if(!a)return s;const u=s[e.field];if(!!u===t||e.validate&&!e.validate(t,s))return s;const x={...s,[e.field]:t};return n.push({rowId:a.id,rowIndex:f,field:e.field,oldValue:u,newValue:t,row:x}),x});n.length!==0&&(ge(o),n.forEach(s=>b==null?void 0:b(s)),p==null||p(o))},Ye=e=>{const t=Ee(e),r=t.length>0?t:G,n=r.filter(s=>!!s.row[e.field]).length,o=r.length>0&&n===r.length;return l.jsx("span",{className:"rk-grid__header-checkbox",onClick:te,onDoubleClick:te,children:l.jsx(fe,{...we(e),checked:o,indeterminate:n>0&&!o,disabled:t.length===0,label:e.headerName??e.field,onChange:s=>Oe(e,s)})})},He=j&&(S==="top"||S==="both"),Je=!j||S==="bottom"||S==="both",De=e=>l.jsxs("div",{className:T("rk-grid__footer",e==="top"&&"rk-grid__footer--top",I.footer),style:w.footer,"data-position":e,children:[l.jsx("span",{...g("rowCount","rk-grid__count"),children:F===0?"0 rows":`${Le}–${Ve} of ${F}`}),j&&l.jsxs("div",{...g("pagination","rk-grid__pagination"),children:[l.jsxs("label",{className:"rk-grid__page-size-label",children:["Rows per page",l.jsx("select",{value:B,onChange:t=>Fe(Number(t.target.value)),...g("pageSize","rk-grid__page-size"),children:(ne.includes(B)?ne:[...ne,B].sort((t,r)=>t-r)).map(t=>l.jsx("option",{value:t,children:t},t))})]}),l.jsx("button",{type:"button","aria-label":"First page",disabled:E===0,onClick:()=>q(0),...g("pageButton","rk-grid__page-btn"),children:"«"}),l.jsx("button",{type:"button","aria-label":"Previous page",disabled:E===0,onClick:()=>q(E-1),...g("pageButton","rk-grid__page-btn"),children:"‹"}),l.jsxs("span",{...g("pageInfo","rk-grid__page-info"),children:["Page ",E+1," of ",O]}),l.jsx("button",{type:"button","aria-label":"Next page",disabled:E>=O-1,onClick:()=>q(E+1),...g("pageButton","rk-grid__page-btn"),children:"›"}),l.jsx("button",{type:"button","aria-label":"Last page",disabled:E>=O-1,onClick:()=>q(O-1),...g("pageButton","rk-grid__page-btn"),children:"»"})]})]}),Qe=i.some(ve);return l.jsxs("div",{className:T("rk-grid",I.root,$e),style:{...w.root,...Me},children:[(C||he)&&l.jsxs("div",{...g("toolbar","rk-grid__toolbar"),children:[C?l.jsx("input",{type:"search",value:J,onChange:e=>Pe(e.target.value),placeholder:M,"aria-label":"Search all columns",...g("search","rk-grid__search")}):l.jsx("span",{}),he]}),He&&De("top"),l.jsx("div",{...g("scroll","rk-grid__scroll"),style:{...w.scroll,...ke!==void 0?{maxHeight:ke}:null},children:l.jsxs("table",{...g("table","rk-grid__table"),role:"grid",children:[l.jsxs("thead",{...g("thead","rk-grid__thead"),children:[l.jsx("tr",{...g("headerRow","rk-grid__tr"),children:i.map(e=>{const t=(N==null?void 0:N.field)===e.field?N.direction:null,r=_e(e);return l.jsx("th",{scope:"col","aria-sort":t?t==="asc"?"ascending":"descending":r?"none":void 0,tabIndex:r?0:void 0,onClick:()=>je(e),onKeyDown:n=>{r&&n.target===n.currentTarget&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),je(e))},className:T("rk-grid__th",r&&"rk-grid__th--sortable",I.headerCell,e.headerClassName),style:{width:e.width,minWidth:e.minWidth,textAlign:e.align,...w.headerCell,...e.headerStyle},children:l.jsxs("span",{className:"rk-grid__th-content",children:[e.headerRenderer?h.createElement(e.headerRenderer,{column:e,sortDirection:t}):e.headerCheckbox&&e.type==="boolean"?Ye(e):e.headerName??e.field,r&&l.jsx("span",{className:"rk-grid__sort","aria-hidden":"true",children:t==="asc"?"▲":t==="desc"?"▼":"↕"})]})},e.field)})}),Qe&&l.jsx("tr",{...g("filterRow","rk-grid__tr"),children:i.map(e=>l.jsx("th",{...g("filterCell","rk-grid__filter-cell"),children:ve(e)&&(e.filterRenderer?h.createElement(e.filterRenderer,{column:e,value:A[e.field]??"",onChange:t=>me(r=>({...r,[e.field]:t}))}):l.jsx("input",{value:A[e.field]??"",onChange:t=>me(r=>({...r,[e.field]:t.target.value})),placeholder:"Filter","aria-label":`Filter ${e.headerName??e.field}`,...g("filterInput","rk-grid__filter-input")}))},e.field))})]}),l.jsx("tbody",{...g("tbody","rk-grid__tbody"),children:$.length===0?l.jsx("tr",{children:l.jsx("td",{colSpan:i.length,...g("empty","rk-grid__empty"),children:Ie})}):$.map((e,t)=>{const{row:r,id:n,index:o}=e,s=typeof ie=="function"?ie(r,o):ie,f=typeof oe=="function"?oe(r,o):oe;return l.jsx("tr",{onClick:le?()=>le(r,o):void 0,className:T("rk-grid__tr","rk-grid__row",Be&&t%2===1&&"rk-grid__row--striped",le&&"rk-grid__row--clickable",I.row,s),style:{...w.row,...f},children:i.map(a=>{const u=Ae(a,e),x=typeof a.cellClassName=="function"?a.cellClassName(u):a.cellClassName,y=typeof a.cellStyle=="function"?a.cellStyle(u):a.cellStyle,de=z!==null&&z.id===n&&z.field===a.field,ce=X(a,u);return l.jsx("td",{ref:re=>{const Ce=Se(n,a.field);re?ae.current.set(Ce,re):ae.current.delete(Ce)},tabIndex:ce?0:void 0,onDoubleClick:ce?()=>ee(e,a):void 0,onKeyDown:re=>ze(re,e,a,u),className:T("rk-grid__td",ce&&"rk-grid__td--editable",de&&"rk-grid__td--editing",I.cell,x),style:{textAlign:a.align,...w.cell,...y},children:de&&z?We(e,a,z):a.cellRenderer?h.createElement(a.cellRenderer,u):a.type==="boolean"&&!a.cellEditor?Ge(a,u):u.formattedValue},a.field)})},n)})})]})}),Je&&De("bottom")]})}exports.Alert=rt;exports.Badge=tt;exports.Button=Xe;exports.Card=et;exports.Checkbox=fe;exports.DataGrid=at;exports.Input=Ze;exports.Modal=nt;

package/dist/react-gridix.js

@@ -0,0 +1,614 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { forwardRef as je, useId as Me, useRef as Q, useEffect as be, useState as M, useMemo as $e, createElement as ie } from "react";
+import { createPortal as lt } from "react-dom";
+const ut = je(function({ variant: s = "primary", size: c = "md", loading: h = !1, disabled: v, className: b, children: _, ...m }, E) {
+  const x = ["rk-btn", `rk-btn--${s}`, `rk-btn--${c}`, b].filter(Boolean).join(" ");
+  return /* @__PURE__ */ p("button", { ref: E, className: x, disabled: v || h, "aria-busy": h || void 0, ...m, children: [
+    h && /* @__PURE__ */ o("span", { className: "rk-spinner", "aria-hidden": "true" }),
+    _
+  ] });
+}), ft = je(function({ label: s, error: c, hint: h, id: v, className: b, ..._ }, m) {
+  const E = Me(), x = v ?? E, I = c || h ? `${x}-desc` : void 0;
+  return /* @__PURE__ */ p("div", { className: ["rk-field", b].filter(Boolean).join(" "), children: [
+    s && /* @__PURE__ */ o("label", { className: "rk-label", htmlFor: x, children: s }),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: m,
+        id: x,
+        className: `rk-input${c ? " rk-input--error" : ""}`,
+        "aria-invalid": c ? !0 : void 0,
+        "aria-describedby": I,
+        ..._
+      }
+    ),
+    (c || h) && /* @__PURE__ */ o("span", { id: I, className: c ? "rk-error-text" : "rk-hint", children: c ?? h })
+  ] });
+});
+function ht({ title: l, footer: s, className: c, children: h, ...v }) {
+  return /* @__PURE__ */ p("div", { className: ["rk-card", c].filter(Boolean).join(" "), ...v, children: [
+    l && /* @__PURE__ */ o("div", { className: "rk-card__header", children: l }),
+    /* @__PURE__ */ o("div", { className: "rk-card__body", children: h }),
+    s && /* @__PURE__ */ o("div", { className: "rk-card__footer", children: s })
+  ] });
+}
+function kt({ tone: l = "neutral", className: s, children: c, ...h }) {
+  return /* @__PURE__ */ o("span", { className: ["rk-badge", `rk-badge--${l}`, s].filter(Boolean).join(" "), ...h, children: c });
+}
+function bt({ tone: l = "info", title: s, onClose: c, className: h, children: v, ...b }) {
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      role: l === "danger" || l === "warning" ? "alert" : "status",
+      className: ["rk-alert", `rk-alert--${l}`, h].filter(Boolean).join(" "),
+      ...b,
+      children: [
+        /* @__PURE__ */ p("div", { className: "rk-alert__content", children: [
+          s && /* @__PURE__ */ o("strong", { className: "rk-alert__title", children: s }),
+          /* @__PURE__ */ o("div", { children: v })
+        ] }),
+        c && /* @__PURE__ */ o("button", { type: "button", className: "rk-alert__close", "aria-label": "Dismiss", onClick: c, children: "×" })
+      ]
+    }
+  );
+}
+function gt({ open: l, onClose: s, title: c, footer: h, children: v }) {
+  const b = Me(), _ = Q(null);
+  return be(() => {
+    var I;
+    if (!l) return;
+    const m = document.activeElement;
+    (I = _.current) == null || I.focus();
+    const E = (P) => {
+      P.key === "Escape" && s();
+    };
+    document.addEventListener("keydown", E);
+    const x = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      var P;
+      document.removeEventListener("keydown", E), document.body.style.overflow = x, (P = m == null ? void 0 : m.focus) == null || P.call(m);
+    };
+  }, [l, s]), !l || typeof document > "u" ? null : lt(
+    /* @__PURE__ */ o("div", { className: "rk-overlay", onMouseDown: (m) => m.target === m.currentTarget && s(), children: /* @__PURE__ */ p(
+      "div",
+      {
+        ref: _,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": c ? b : void 0,
+        tabIndex: -1,
+        className: "rk-modal",
+        children: [
+          c && /* @__PURE__ */ p("div", { className: "rk-modal__header", children: [
+            /* @__PURE__ */ o("h2", { id: b, className: "rk-modal__title", children: c }),
+            /* @__PURE__ */ o("button", { type: "button", className: "rk-alert__close", "aria-label": "Close", onClick: s, children: "×" })
+          ] }),
+          /* @__PURE__ */ o("div", { className: "rk-modal__body", children: v }),
+          h && /* @__PURE__ */ o("div", { className: "rk-modal__footer", children: h })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+const J = (...l) => l.filter(Boolean).join(" ");
+function it() {
+  return /* @__PURE__ */ o("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ o(
+    "path",
+    {
+      d: "M3.5 8.5l3 3 6-7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function ot() {
+  return /* @__PURE__ */ o("svg", { viewBox: "0 0 16 16", width: "100%", height: "100%", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ o("path", { d: "M4 8h8", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round" }) });
+}
+function Ke({
+  checked: l,
+  onChange: s,
+  indeterminate: c = !1,
+  variant: h = "native",
+  disabled: v = !1,
+  label: b,
+  "aria-label": _,
+  id: m,
+  name: E,
+  indicator: x,
+  className: I,
+  style: P,
+  classNames: j = {},
+  styles: y = {}
+}) {
+  const B = c ? "indeterminate" : l ? "checked" : "unchecked";
+  return /* @__PURE__ */ p(
+    "label",
+    {
+      className: J(
+        "rk-checkbox",
+        `rk-checkbox--${h}`,
+        B === "checked" && "rk-checkbox--checked",
+        c && "rk-checkbox--indeterminate",
+        v && "rk-checkbox--disabled",
+        j.root,
+        I
+      ),
+      style: { ...y.root, ...P },
+      "data-state": B,
+      children: [
+        h === "native" ? /* @__PURE__ */ o(
+          "input",
+          {
+            type: "checkbox",
+            id: m,
+            name: E,
+            ref: (F) => {
+              F && (F.indeterminate = c);
+            },
+            className: J("rk-checkbox__control", j.control),
+            style: y.control,
+            checked: l,
+            disabled: v,
+            "aria-label": _,
+            "data-state": B,
+            onChange: (F) => s(F.target.checked)
+          }
+        ) : /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            id: m,
+            className: J("rk-checkbox__control", j.control),
+            style: y.control,
+            "aria-checked": c ? "mixed" : l,
+            "aria-label": _,
+            disabled: v,
+            "data-state": B,
+            onClick: () => s(!l),
+            children: /* @__PURE__ */ o(
+              "span",
+              {
+                className: J(
+                  "rk-checkbox__indicator",
+                  x !== void 0 && !c && "rk-checkbox__indicator--custom",
+                  j.indicator
+                ),
+                style: y.indicator,
+                "data-state": B,
+                "aria-hidden": "true",
+                children: c ? h === "tick" ? /* @__PURE__ */ o(ot, {}) : null : x !== void 0 ? x : h === "tick" ? /* @__PURE__ */ o(it, {}) : null
+              }
+            )
+          }
+        ),
+        b != null && /* @__PURE__ */ o("span", { className: J("rk-checkbox__label", j.label), style: y.label, children: b })
+      ]
+    }
+  );
+}
+const $ = (...l) => l.filter(Boolean).join(" "), Pe = (l, s) => `${typeof l}:${l}\0${s}`;
+function ke(l, s) {
+  const c = s[l.field];
+  return l.valueFormatter ? l.valueFormatter(c, s) : l.type === "boolean" && typeof c == "boolean" ? c ? "Yes" : "No" : c == null ? "" : c instanceof Date ? c.toLocaleDateString() : String(c);
+}
+function at(l, s) {
+  return typeof l == "number" && typeof s == "number" ? l - s : l instanceof Date && s instanceof Date ? l.getTime() - s.getTime() : typeof l == "boolean" && typeof s == "boolean" ? Number(l) - Number(s) : String(l).localeCompare(String(s), void 0, { numeric: !0, sensitivity: "base" });
+}
+function mt({
+  columns: l,
+  rows: s,
+  getRowId: c,
+  editable: h = !1,
+  enterMovesDown: v = !0,
+  onCellEdit: b,
+  onRowsChange: _,
+  sortable: m = !0,
+  defaultSort: E = null,
+  onSortChange: x,
+  searchable: I = !0,
+  searchPlaceholder: P = "Search…",
+  columnFilters: j = !0,
+  pagination: y = !0,
+  paginationPosition: B = "bottom",
+  pageSize: F = 10,
+  pageSizeOptions: oe = [5, 10, 25, 50],
+  onRowClick: ae,
+  toolbar: ge,
+  emptyMessage: Fe = "No rows to show",
+  striped: Le = !1,
+  checkboxVariant: Ve = "native",
+  maxHeight: me,
+  className: Re,
+  style: Ae,
+  classNames: S = {},
+  styles: D = {},
+  rowClassName: de,
+  rowStyle: se
+}) {
+  const g = (e, t) => ({
+    className: $(t, S[e]),
+    style: D[e]
+  }), [pe, _e] = M(s), A = Q(s);
+  be(() => {
+    A.current = s, _e(s);
+  }, [s]);
+  const ve = (e) => {
+    A.current = e, _e(e);
+  }, [U, ze] = M(""), [z, xe] = M({}), [w, We] = M(E), [qe, W] = M(0), [T, Ge] = M(F), [q, G] = M(null), L = Q(0), X = Q(null), ce = Q(/* @__PURE__ */ new Map()), ye = $e(
+    () => pe.map((e, t) => ({ row: e, index: t, id: c ? c(e, t) : t })),
+    [pe, c]
+  ), O = $e(() => {
+    const e = U.trim().toLowerCase(), t = Object.entries(z).filter(([, n]) => n.trim() !== "");
+    let r = ye.filter(({ row: n }) => e && !l.some((d) => ke(d, n).toLowerCase().includes(e)) ? !1 : t.every(([i, d]) => {
+      const f = l.find((a) => a.field === i);
+      return f ? ke(f, n).toLowerCase().includes(d.trim().toLowerCase()) : !0;
+    }));
+    if (w) {
+      const n = l.find((i) => i.field === w.field);
+      if (n) {
+        const i = w.direction === "asc" ? 1 : -1;
+        r = [...r].sort((d, f) => {
+          const a = d.row[n.field], u = f.row[n.field], k = a == null || a === "", N = u == null || u === "";
+          return k || N ? k === N ? 0 : k ? 1 : -1 : (n.comparator ? n.comparator(a, u, d.row, f.row) : at(a, u)) * i;
+        });
+      }
+    }
+    return r;
+  }, [ye, l, U, z, w]);
+  be(() => W(0), [U, z, w, T]);
+  const V = O.length, Y = y ? Math.max(1, Math.ceil(V / T)) : 1, C = Math.min(qe, Y - 1), K = y ? O.slice(C * T, C * T + T) : O, Oe = V === 0 ? 0 : y ? C * T + 1 : 1, Ye = y ? Math.min(V, (C + 1) * T) : V, Ne = (e) => e.sortable ?? m, we = (e) => e.filterable ?? j, Z = (e, t, r) => ({
+    value: t[e.field],
+    formattedValue: ke(e, t),
+    row: t,
+    rowIndex: r,
+    field: e.field,
+    column: e
+  }), ue = (e, t) => {
+    const r = e.editable ?? h;
+    return typeof r == "function" ? r(t) : !!r;
+  }, ee = (e, t) => ue(e, t) && !(e.type === "boolean" && !e.cellEditor), He = (e, t) => {
+    const r = Z(e, t.row, t.index), n = ue(e, r);
+    return {
+      ...r,
+      editable: n,
+      updateValue: (i) => n && Ce(t, e, { value: i })
+    };
+  }, De = (e) => {
+    if (!Ne(e)) return;
+    let t;
+    !w || w.field !== e.field ? t = { field: e.field, direction: "asc" } : w.direction === "asc" ? t = { field: e.field, direction: "desc" } : t = null, We(t), x == null || x(t);
+  }, te = (e, t) => {
+    var r;
+    return (r = ce.current.get(Pe(e, t))) == null ? void 0 : r.focus();
+  }, R = () => {
+    L.current += 1, G(null);
+  }, re = (e, t, r = {}) => {
+    if (!ee(t, Z(t, e.row, e.index))) return !1;
+    const n = e.row[t.field], i = t.cellEditor ? n : r.text ?? (n == null ? "" : String(n));
+    return X.current = i, L.current += 1, G({
+      id: e.id,
+      field: t.field,
+      draft: i,
+      session: L.current,
+      select: r.select ?? "end",
+      invalid: !1
+    }), !0;
+  }, Ce = (e, t, r) => {
+    const n = A.current[e.index] ?? e.row, i = n[t.field];
+    let d;
+    if ("value" in r)
+      d = r.value;
+    else if (t.valueParser)
+      d = t.valueParser(r.text, n);
+    else if (t.type === "number")
+      if (r.text.trim() === "") d = null;
+      else {
+        const u = Number(r.text);
+        if (!Number.isFinite(u)) return !1;
+        d = u;
+      }
+    else
+      d = r.text;
+    if (Object.is(d, i)) return !0;
+    if (t.validate && !t.validate(d, n)) return !1;
+    const f = { ...n, [t.field]: d }, a = A.current.map((u, k) => k === e.index ? f : u);
+    return ve(a), b == null || b({ rowId: e.id, rowIndex: e.index, field: t.field, oldValue: i, newValue: d, row: f }), _ == null || _(a), !0;
+  }, Ee = (e, t, r) => {
+    const n = K.findIndex((k) => k.id === e.id), i = l.findIndex((k) => k.field === t);
+    if (n < 0 || i < 0) return null;
+    const d = (k, N) => ee(N, Z(N, k.row, k.index));
+    if (r === "down" || r === "up") {
+      const k = r === "down" ? 1 : -1;
+      for (let N = n + k; N >= 0 && N < K.length; N += k)
+        if (d(K[N], l[i])) return { entry: K[N], col: l[i] };
+      return null;
+    }
+    const f = r === "right" ? 1 : -1;
+    let a = n, u = i + f;
+    for (; a >= 0 && a < K.length; ) {
+      for (; u >= 0 && u < l.length; ) {
+        if (d(K[a], l[u])) return { entry: K[a], col: l[u] };
+        u += f;
+      }
+      a += f, u = f > 0 ? 0 : l.length - 1;
+    }
+    return null;
+  }, H = (e, t, r, n = {}) => {
+    const { move: i = "none", focus: d = !0 } = n;
+    if (!Ce(e, t, r))
+      return G((a) => a && { ...a, invalid: !0 }), !1;
+    const f = i === "none" ? null : Ee(e, t.field, i);
+    return f ? re(f.entry, f.col, { select: "all" }) : (R(), d && te(e.id, t.field)), !0;
+  }, Je = (e, t, r) => {
+    if (e.nativeEvent.isComposing) return;
+    const n = e.currentTarget.value;
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const i = v ? e.shiftKey ? "up" : "down" : "none";
+      H(t, r, { text: n }, { move: i });
+    } else if (e.key === "Escape")
+      e.preventDefault(), R(), te(t.id, r.field);
+    else if (e.key === "Tab") {
+      const i = e.shiftKey ? "left" : "right";
+      Ee(t, r.field, i) && (e.preventDefault(), H(t, r, { text: n }, { move: i }));
+    }
+  }, Qe = (e, t, r, n) => {
+    e.target !== e.currentTarget || !ee(r, n) || (e.key === "Enter" || e.key === "F2" ? (e.preventDefault(), re(t, r)) : !r.cellEditor && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), re(t, r, { text: e.key })));
+  }, Ue = (e, t, r) => t.cellEditor ? /* @__PURE__ */ o(
+    "div",
+    {
+      className: "rk-grid__custom-editor",
+      onBlur: (n) => {
+        n.currentTarget.contains(n.relatedTarget) || r.session === L.current && (H(e, t, { value: X.current }, { focus: !1 }) || R());
+      },
+      onKeyDown: (n) => {
+        n.key === "Escape" && (n.preventDefault(), n.stopPropagation(), R(), te(e.id, t.field));
+      },
+      children: ie(t.cellEditor, {
+        value: r.draft,
+        row: e.row,
+        rowIndex: e.index,
+        field: t.field,
+        column: t,
+        onChange: (n) => {
+          X.current = n, G((i) => i && i.session === r.session ? { ...i, draft: n, invalid: !1 } : i);
+        },
+        onCommit: (n, i = "none") => {
+          r.session === L.current && H(e, t, { value: n === void 0 ? X.current : n }, { move: i });
+        },
+        onCancel: () => {
+          R(), te(e.id, t.field);
+        }
+      })
+    }
+  ) : /* @__PURE__ */ o(
+    "input",
+    {
+      autoFocus: !0,
+      className: $("rk-grid__editor", r.invalid && "rk-grid__editor--invalid", S.editor),
+      style: { textAlign: t.align, ...D.editor },
+      value: r.draft === null || r.draft === void 0 ? "" : String(r.draft),
+      inputMode: t.type === "number" ? "decimal" : void 0,
+      "aria-label": `Edit ${t.headerName ?? t.field}`,
+      "aria-invalid": r.invalid || void 0,
+      onChange: (n) => {
+        const i = n.target.value;
+        G((d) => d && { ...d, draft: i, invalid: !1 });
+      },
+      onFocus: (n) => {
+        const i = n.currentTarget;
+        r.select === "all" ? i.select() : i.setSelectionRange(i.value.length, i.value.length);
+      },
+      onBlur: (n) => {
+        r.session === L.current && (H(e, t, { text: n.currentTarget.value }, { focus: !1 }) || R());
+      },
+      onKeyDown: (n) => Je(n, e, t)
+    }
+  ), Ie = (e) => {
+    var r, n, i, d, f, a, u, k;
+    const t = e.checkbox ?? {};
+    return {
+      variant: t.variant ?? Ve,
+      indicator: t.indicator,
+      className: t.className,
+      style: t.style,
+      classNames: {
+        root: $(S.checkbox, (r = t.classNames) == null ? void 0 : r.root),
+        control: $(S.checkboxControl, (n = t.classNames) == null ? void 0 : n.control),
+        indicator: $(S.checkboxIndicator, (i = t.classNames) == null ? void 0 : i.indicator),
+        label: (d = t.classNames) == null ? void 0 : d.label
+      },
+      styles: {
+        root: { ...D.checkbox, ...(f = t.styles) == null ? void 0 : f.root },
+        control: { ...D.checkboxControl, ...(a = t.styles) == null ? void 0 : a.control },
+        indicator: { ...D.checkboxIndicator, ...(u = t.styles) == null ? void 0 : u.indicator },
+        label: (k = t.styles) == null ? void 0 : k.label
+      }
+    };
+  }, ne = (e) => e.stopPropagation(), Xe = (e, t) => /* @__PURE__ */ o("span", { className: "rk-grid__checkbox-cell", onClick: ne, onDoubleClick: ne, children: /* @__PURE__ */ o(
+    Ke,
+    {
+      ...Ie(e),
+      checked: !!t.value,
+      disabled: !t.editable,
+      "aria-label": `Toggle ${e.headerName ?? e.field}`,
+      onChange: (r) => t.updateValue(r)
+    }
+  ) }), Be = (e) => O.filter((t) => ue(e, Z(e, t.row, t.index))), Ze = (e, t) => {
+    const r = new Map(Be(e).map((d) => [d.index, d])), n = [], i = A.current.map((d, f) => {
+      const a = r.get(f);
+      if (!a) return d;
+      const u = d[e.field];
+      if (!!u === t || e.validate && !e.validate(t, d)) return d;
+      const k = { ...d, [e.field]: t };
+      return n.push({ rowId: a.id, rowIndex: f, field: e.field, oldValue: u, newValue: t, row: k }), k;
+    });
+    n.length !== 0 && (ve(i), n.forEach((d) => b == null ? void 0 : b(d)), _ == null || _(i));
+  }, et = (e) => {
+    const t = Be(e), r = t.length > 0 ? t : O, n = r.filter((d) => !!d.row[e.field]).length, i = r.length > 0 && n === r.length;
+    return /* @__PURE__ */ o("span", { className: "rk-grid__header-checkbox", onClick: ne, onDoubleClick: ne, children: /* @__PURE__ */ o(
+      Ke,
+      {
+        ...Ie(e),
+        checked: i,
+        indeterminate: n > 0 && !i,
+        disabled: t.length === 0,
+        label: e.headerName ?? e.field,
+        onChange: (d) => Ze(e, d)
+      }
+    ) });
+  }, tt = y && (B === "top" || B === "both"), rt = !y || B === "bottom" || B === "both", Se = (e) => /* @__PURE__ */ p(
+    "div",
+    {
+      className: $("rk-grid__footer", e === "top" && "rk-grid__footer--top", S.footer),
+      style: D.footer,
+      "data-position": e,
+      children: [
+        /* @__PURE__ */ o("span", { ...g("rowCount", "rk-grid__count"), children: V === 0 ? "0 rows" : `${Oe}–${Ye} of ${V}` }),
+        y && /* @__PURE__ */ p("div", { ...g("pagination", "rk-grid__pagination"), children: [
+          /* @__PURE__ */ p("label", { className: "rk-grid__page-size-label", children: [
+            "Rows per page",
+            /* @__PURE__ */ o(
+              "select",
+              {
+                value: T,
+                onChange: (t) => Ge(Number(t.target.value)),
+                ...g("pageSize", "rk-grid__page-size"),
+                children: (oe.includes(T) ? oe : [...oe, T].sort((t, r) => t - r)).map(
+                  (t) => /* @__PURE__ */ o("option", { value: t, children: t }, t)
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o("button", { type: "button", "aria-label": "First page", disabled: C === 0, onClick: () => W(0), ...g("pageButton", "rk-grid__page-btn"), children: "«" }),
+          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Previous page", disabled: C === 0, onClick: () => W(C - 1), ...g("pageButton", "rk-grid__page-btn"), children: "‹" }),
+          /* @__PURE__ */ p("span", { ...g("pageInfo", "rk-grid__page-info"), children: [
+            "Page ",
+            C + 1,
+            " of ",
+            Y
+          ] }),
+          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Next page", disabled: C >= Y - 1, onClick: () => W(C + 1), ...g("pageButton", "rk-grid__page-btn"), children: "›" }),
+          /* @__PURE__ */ o("button", { type: "button", "aria-label": "Last page", disabled: C >= Y - 1, onClick: () => W(Y - 1), ...g("pageButton", "rk-grid__page-btn"), children: "»" })
+        ] })
+      ]
+    }
+  ), nt = l.some(we);
+  return /* @__PURE__ */ p("div", { className: $("rk-grid", S.root, Re), style: { ...D.root, ...Ae }, children: [
+    (I || ge) && /* @__PURE__ */ p("div", { ...g("toolbar", "rk-grid__toolbar"), children: [
+      I ? /* @__PURE__ */ o(
+        "input",
+        {
+          type: "search",
+          value: U,
+          onChange: (e) => ze(e.target.value),
+          placeholder: P,
+          "aria-label": "Search all columns",
+          ...g("search", "rk-grid__search")
+        }
+      ) : /* @__PURE__ */ o("span", {}),
+      ge
+    ] }),
+    tt && Se("top"),
+    /* @__PURE__ */ o("div", { ...g("scroll", "rk-grid__scroll"), style: { ...D.scroll, ...me !== void 0 ? { maxHeight: me } : null }, children: /* @__PURE__ */ p("table", { ...g("table", "rk-grid__table"), role: "grid", children: [
+      /* @__PURE__ */ p("thead", { ...g("thead", "rk-grid__thead"), children: [
+        /* @__PURE__ */ o("tr", { ...g("headerRow", "rk-grid__tr"), children: l.map((e) => {
+          const t = (w == null ? void 0 : w.field) === e.field ? w.direction : null, r = Ne(e);
+          return /* @__PURE__ */ o(
+            "th",
+            {
+              scope: "col",
+              "aria-sort": t ? t === "asc" ? "ascending" : "descending" : r ? "none" : void 0,
+              tabIndex: r ? 0 : void 0,
+              onClick: () => De(e),
+              onKeyDown: (n) => {
+                r && n.target === n.currentTarget && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), De(e));
+              },
+              className: $("rk-grid__th", r && "rk-grid__th--sortable", S.headerCell, e.headerClassName),
+              style: { width: e.width, minWidth: e.minWidth, textAlign: e.align, ...D.headerCell, ...e.headerStyle },
+              children: /* @__PURE__ */ p("span", { className: "rk-grid__th-content", children: [
+                e.headerRenderer ? ie(e.headerRenderer, { column: e, sortDirection: t }) : e.headerCheckbox && e.type === "boolean" ? et(e) : e.headerName ?? e.field,
+                r && /* @__PURE__ */ o("span", { className: "rk-grid__sort", "aria-hidden": "true", children: t === "asc" ? "▲" : t === "desc" ? "▼" : "↕" })
+              ] })
+            },
+            e.field
+          );
+        }) }),
+        nt && /* @__PURE__ */ o("tr", { ...g("filterRow", "rk-grid__tr"), children: l.map((e) => /* @__PURE__ */ o("th", { ...g("filterCell", "rk-grid__filter-cell"), children: we(e) && (e.filterRenderer ? ie(e.filterRenderer, {
+          column: e,
+          value: z[e.field] ?? "",
+          onChange: (t) => xe((r) => ({ ...r, [e.field]: t }))
+        }) : /* @__PURE__ */ o(
+          "input",
+          {
+            value: z[e.field] ?? "",
+            onChange: (t) => xe((r) => ({ ...r, [e.field]: t.target.value })),
+            placeholder: "Filter",
+            "aria-label": `Filter ${e.headerName ?? e.field}`,
+            ...g("filterInput", "rk-grid__filter-input")
+          }
+        )) }, e.field)) })
+      ] }),
+      /* @__PURE__ */ o("tbody", { ...g("tbody", "rk-grid__tbody"), children: K.length === 0 ? /* @__PURE__ */ o("tr", { children: /* @__PURE__ */ o("td", { colSpan: l.length, ...g("empty", "rk-grid__empty"), children: Fe }) }) : K.map((e, t) => {
+        const { row: r, id: n, index: i } = e, d = typeof de == "function" ? de(r, i) : de, f = typeof se == "function" ? se(r, i) : se;
+        return /* @__PURE__ */ o(
+          "tr",
+          {
+            onClick: ae ? () => ae(r, i) : void 0,
+            className: $(
+              "rk-grid__tr",
+              "rk-grid__row",
+              Le && t % 2 === 1 && "rk-grid__row--striped",
+              ae && "rk-grid__row--clickable",
+              S.row,
+              d
+            ),
+            style: { ...D.row, ...f },
+            children: l.map((a) => {
+              const u = He(a, e), k = typeof a.cellClassName == "function" ? a.cellClassName(u) : a.cellClassName, N = typeof a.cellStyle == "function" ? a.cellStyle(u) : a.cellStyle, fe = q !== null && q.id === n && q.field === a.field, he = ee(a, u);
+              return /* @__PURE__ */ o(
+                "td",
+                {
+                  ref: (le) => {
+                    const Te = Pe(n, a.field);
+                    le ? ce.current.set(Te, le) : ce.current.delete(Te);
+                  },
+                  tabIndex: he ? 0 : void 0,
+                  onDoubleClick: he ? () => re(e, a) : void 0,
+                  onKeyDown: (le) => Qe(le, e, a, u),
+                  className: $(
+                    "rk-grid__td",
+                    he && "rk-grid__td--editable",
+                    fe && "rk-grid__td--editing",
+                    S.cell,
+                    k
+                  ),
+                  style: { textAlign: a.align, ...D.cell, ...N },
+                  children: fe && q ? Ue(e, a, q) : a.cellRenderer ? ie(a.cellRenderer, u) : a.type === "boolean" && !a.cellEditor ? Xe(a, u) : u.formattedValue
+                },
+                a.field
+              );
+            })
+          },
+          n
+        );
+      }) })
+    ] }) }),
+    rt && Se("bottom")
+  ] });
+}
+export {
+  bt as Alert,
+  kt as Badge,
+  ut as Button,
+  ht as Card,
+  Ke as Checkbox,
+  mt as DataGrid,
+  ft as Input,
+  gt as Modal
+};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--rk-primary: #4f46e5;--rk-primary-hover: #4338ca;--rk-danger: #dc2626;--rk-danger-hover: #b91c1c;--rk-text: #111827;--rk-muted: #6b7280;--rk-border: #d1d5db;--rk-surface: #ffffff;--rk-bg-subtle: #f3f4f6;--rk-radius: 0px;--rk-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--rk-font);font-weight:500;border:1px solid transparent;border-radius:var(--rk-radius);cursor:pointer;transition:background .15s,border-color .15s}.rk-btn:focus-visible{outline:2px solid var(--rk-primary);outline-offset:2px}.rk-btn:disabled{opacity:.55;cursor:not-allowed}.rk-btn--sm{padding:4px 10px;font-size:13px}.rk-btn--md{padding:8px 16px;font-size:14px}.rk-btn--lg{padding:12px 22px;font-size:16px}.rk-btn--primary{background:var(--rk-primary);color:#fff}.rk-btn--primary:hover:not(:disabled){background:var(--rk-primary-hover)}.rk-btn--secondary{background:var(--rk-surface);color:var(--rk-text);border-color:var(--rk-border)}.rk-btn--secondary:hover:not(:disabled){background:var(--rk-bg-subtle)}.rk-btn--ghost{background:transparent;color:var(--rk-primary)}.rk-btn--ghost:hover:not(:disabled){background:var(--rk-bg-subtle)}.rk-btn--danger{background:var(--rk-danger);color:#fff}.rk-btn--danger:hover:not(:disabled){background:var(--rk-danger-hover)}.rk-spinner{width:1em;height:1em;border-radius:50%;border:1px solid currentColor;border-right-color:transparent;animation:rk-spin .7s linear infinite}@keyframes rk-spin{to{transform:rotate(360deg)}}.rk-field{display:flex;flex-direction:column;gap:4px;font-family:var(--rk-font)}.rk-label{font-size:14px;font-weight:500;color:var(--rk-text)}.rk-input{padding:8px 12px;font:inherit;font-size:14px;color:var(--rk-text);background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-radius)}.rk-input:focus{outline:2px solid var(--rk-primary);outline-offset:0;border-color:var(--rk-primary)}.rk-input--error{border-color:var(--rk-danger)}.rk-hint{font-size:12px;color:var(--rk-muted)}.rk-error-text{font-size:12px;color:var(--rk-danger)}.rk-card{font-family:var(--rk-font);background:var(--rk-surface);color:var(--rk-text);border:1px solid var(--rk-border);border-radius:calc(var(--rk-radius) + 4px);box-shadow:0 1px 3px #0000000f;overflow:hidden}.rk-card__header{padding:14px 18px;font-weight:600;border-bottom:1px solid var(--rk-border)}.rk-card__body{padding:18px}.rk-card__footer{padding:12px 18px;background:var(--rk-bg-subtle);border-top:1px solid var(--rk-border)}.rk-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-family:var(--rk-font);font-size:12px;font-weight:500}.rk-badge--neutral{background:#e5e7eb;color:#374151}.rk-badge--info{background:#dbeafe;color:#1e40af}.rk-badge--success{background:#dcfce7;color:#166534}.rk-badge--warning{background:#fef3c7;color:#92400e}.rk-badge--danger{background:#fee2e2;color:#991b1b}.rk-alert{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--rk-radius);border:1px solid;font-family:var(--rk-font);font-size:14px}.rk-alert__title{display:block;margin-bottom:2px}.rk-alert__close{background:none;border:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.7}.rk-alert__close:hover{opacity:1}.rk-alert--info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}.rk-alert--success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}.rk-alert--warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.rk-alert--danger{background:#fef2f2;border-color:#fecaca;color:#991b1b}.rk-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#11182780;padding:16px}.rk-modal{width:100%;max-width:480px;max-height:90vh;overflow:auto;background:var(--rk-surface);color:var(--rk-text);font-family:var(--rk-font);border-radius:12px;box-shadow:0 20px 50px #00000040}.rk-modal:focus{outline:none}.rk-modal__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rk-border)}.rk-modal__title{margin:0;font-size:18px}.rk-modal__body{padding:20px}.rk-modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--rk-border)}:where(.rk-checkbox){display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;line-height:1;vertical-align:middle}:where(.rk-checkbox--disabled){cursor:not-allowed;opacity:.55}:where(.rk-checkbox__control){box-sizing:border-box;flex:none;margin:0;cursor:inherit;width:var(--rk-checkbox-size, 20px);height:var(--rk-checkbox-size, 20px)}:where(.rk-checkbox__control:disabled){cursor:not-allowed}:where(.rk-checkbox__control:focus-visible){outline:2px solid var(--rk-checkbox-color, #4f46e5);outline-offset:2px}:where(.rk-checkbox--button .rk-checkbox__control,.rk-checkbox--tick .rk-checkbox__control){display:inline-flex;align-items:center;justify-content:center;padding:0;border:2px solid var(--rk-checkbox-border, #9ca3af);border-radius:var(--rk-checkbox-radius, 2px);background:var(--rk-checkbox-bg, #fff);color:var(--rk-checkbox-tick, #fff);transition:background .12s,border-color .12s}:where(.rk-checkbox--button .rk-checkbox__control[aria-checked=true],.rk-checkbox--button .rk-checkbox__control[aria-checked=mixed]){border-color:var(--rk-checkbox-color, #4f46e5)}:where(.rk-checkbox--tick .rk-checkbox__control[aria-checked=true],.rk-checkbox--tick .rk-checkbox__control[aria-checked=mixed]){background:var(--rk-checkbox-color, #4f46e5);border-color:var(--rk-checkbox-color, #4f46e5)}:where(.rk-checkbox__indicator){display:block;line-height:1;text-align:center;visibility:hidden}:where(.rk-checkbox__indicator[data-state=checked],.rk-checkbox__indicator[data-state=indeterminate]){visibility:visible}:where(.rk-checkbox--button .rk-checkbox__indicator){width:55%;height:55%;border-radius:calc(var(--rk-checkbox-radius, 3px) - 2px);background:var(--rk-checkbox-color, #4f46e5)}:where(.rk-checkbox--tick .rk-checkbox__indicator){width:80%;height:80%}:where(.rk-checkbox--button .rk-checkbox__indicator[data-state=indeterminate]){height:16%;border-radius:1px}:where(.rk-checkbox__indicator--custom){width:auto;height:auto;background:none}:where(.rk-checkbox--native .rk-checkbox__control){accent-color:var(--rk-checkbox-color, #4f46e5)}:where(.rk-checkbox__label){font-size:14px}:where(.rk-grid){display:flex;flex-direction:column;font-family:var(--rk-font, system-ui, sans-serif);font-size:14px;color:var(--rk-text, #111827);background:var(--rk-surface, #fff);border:1px solid var(--rk-border, #d1d5db);border-radius:10px;overflow:hidden}:where(.rk-grid__toolbar){display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--rk-border, #d1d5db)}:where(.rk-grid__search){width:260px;max-width:100%;padding:7px 12px;font:inherit;border:1px solid var(--rk-border, #d1d5db);border-radius:8px;background:var(--rk-surface, #fff);color:inherit}:where(.rk-grid__search:focus,.rk-grid__filter-input:focus,.rk-grid__page-size:focus){outline:2px solid var(--rk-primary, #4f46e5);outline-offset:-1px}:where(.rk-grid__scroll){overflow:auto}:where(.rk-grid__table){width:100%;border-collapse:collapse}:where(.rk-grid__thead){position:sticky;top:0;z-index:1;background:var(--rk-bg-subtle, #f3f4f6)}:where(.rk-grid__th){padding:10px 12px;text-align:left;font-weight:600;white-space:nowrap;background:var(--rk-bg-subtle, #f3f4f6);border-bottom:1px solid var(--rk-border, #d1d5db);-webkit-user-select:none;user-select:none}:where(.rk-grid__th--sortable){cursor:pointer}:where(.rk-grid__th--sortable:hover){background:#e5e7eb}:where(.rk-grid__th:focus-visible,.rk-grid__td:focus-visible){outline:2px solid var(--rk-primary, #4f46e5);outline-offset:-2px}:where(.rk-grid__th-content){display:inline-flex;align-items:center;gap:6px}:where(.rk-grid__sort){font-size:10px;opacity:.55}:where(.rk-grid__filter-cell){padding:4px 8px;background:var(--rk-surface, #fff);border-bottom:1px solid var(--rk-border, #d1d5db);font-weight:400}:where(.rk-grid__filter-input){width:100%;box-sizing:border-box;padding:4px 8px;font:inherit;font-size:13px;border:1px solid var(--rk-border, #d1d5db);border-radius:6px;background:var(--rk-surface, #fff);color:inherit}:where(.rk-grid__td){padding:9px 12px;border-bottom:1px solid #eef0f3}:where(.rk-grid__td--editable){cursor:text}:where(.rk-grid__td--editing){padding:3px 6px}:where(.rk-grid__row:hover){background:#f9fafb}:where(.rk-grid__row--striped){background:#fafafa}:where(.rk-grid__row--clickable){cursor:pointer}:where(.rk-grid__editor){width:100%;box-sizing:border-box;padding:5px 8px;font:inherit;border:2px solid var(--rk-primary, #4f46e5);border-radius:6px;background:var(--rk-surface, #fff);color:inherit}:where(.rk-grid__editor:focus){outline:none}:where(.rk-grid__editor--invalid){border-color:var(--rk-danger, #dc2626);background:#fef2f2}:where(.rk-grid__custom-editor){display:flex;align-items:center;min-height:30px}:where(.rk-grid__checkbox-cell,.rk-grid__header-checkbox){display:inline-flex;vertical-align:middle}:where(.rk-grid__empty){padding:32px 12px;text-align:center;color:var(--rk-muted, #6b7280)}:where(.rk-grid__footer){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 12px;border-top:1px solid var(--rk-border, #d1d5db);background:var(--rk-bg-subtle, #f3f4f6);color:var(--rk-muted, #6b7280);font-size:13px}:where(.rk-grid__footer--top){border-top:0;border-bottom:1px solid var(--rk-border, #d1d5db)}:where(.rk-grid__pagination){display:flex;align-items:center;gap:8px}:where(.rk-grid__page-size-label){display:inline-flex;align-items:center;gap:6px;margin-right:8px}:where(.rk-grid__page-size){padding:3px 6px;font:inherit;border:1px solid var(--rk-border, #d1d5db);border-radius:6px;background:var(--rk-surface, #fff)}:where(.rk-grid__page-btn){min-width:30px;padding:3px 8px;font:inherit;cursor:pointer;color:var(--rk-text, #111827);background:var(--rk-surface, #fff);border:1px solid var(--rk-border, #d1d5db);border-radius:6px}:where(.rk-grid__page-btn:hover:not(:disabled)){background:#e5e7eb}:where(.rk-grid__page-btn:disabled){opacity:.4;cursor:not-allowed}

package/package.json

@@ -1,6 +1,41 @@
 {
   "name": "react-gridix",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "A simple React component library",
+  "author": "Felix Ongom",
+  "type": "module",
+  "main": "./dist/react-gridix.cjs",
+  "module": "./dist/react-gridix.js",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-gridix.js",
+      "require": "./dist/react-gridix.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["**/*.css"],
+  "scripts": {
+    "dev": "vite --config vite.demo.config.ts",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^4.0.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.