eidos-ui 0.1.0

package/dist/chunk-LEZ4HSBD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-LEZ4HSBD.cjs","../src/components/Table/Table.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACpCA,8BAA2D;AAE3D;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA,2CACK;AAiHC,+CAAA;AAtFR,IAAM,gBAAA,EAAuD;AAAA,EAC3D,EAAE,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,UAAU,CAAA;AAAA,EACrC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,cAAc,CAAA;AAAA,EAC7C,EAAE,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,WAAW;AACzC,CAAA;AAIA,SAAS,cAAA,CAAe,KAAA,EAAuB;AAC7C,EAAA,GAAA,CAAI,KAAA,CAAM,QAAA,CAAS,GAAG,EAAA,GAAK,KAAA,CAAM,QAAA,CAAS,IAAI,EAAA,GAAK,KAAA,CAAM,QAAA,CAAS,GAAG,CAAA,EAAG;AACtE,IAAA,OAAO,CAAA,CAAA,EAAI,KAAA,CAAM,OAAA,CAAQ,IAAA,EAAM,IAAI,CAAC,CAAA,CAAA,CAAA;AAAA,EACtC;AACA,EAAA,OAAO,KAAA;AACT;AAoBA,SAAS,oBAAA,CAAqB;AAAA,EAC5B,EAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,EAAE,UAAA,EAAY,SAAA,EAAW,UAAA,EAAY,SAAA,EAAW,UAAA,EAAY,WAAW,EAAA,EAAI,2CAAA;AAAY,IAC3F;AAAA,EACF,CAAC,CAAA;AAED,EAAA,MAAM,aAAA,EAAe,qBAAA,CAAI,SAAA,CAAU,QAAA,CAAS,SAAS,CAAA;AAErD,EAAA,MAAM,YAAA,EAAc;AAAA,IAClB,yBAAA;AAAA,IACA,CAAA,wBAAA,EAA2B,UAAU,CAAA,CAAA;AACC,IAAA;AAClB,IAAA;AACU,IAAA;AAC9B,IAAA;AAGS,EAAA;AAGT,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACM,MAAA;AACJ,MAAA;AACE,QAAA;AACJ,QAAA;AAC6B,QAAA;AACN,QAAA;AACE,QAAA;AAC9B,MAAA;AACc,MAAA;AACe,MAAA;AACzB,MAAA;AAIJ,MAAA;AAAA,wBAAA;AAAC,UAAA;AAAA,UAAA;AACW,YAAA;AACN,YAAA;AACc,YAAA;AACZ,YAAA;AAEL,YAAA;AAAuB,UAAA;AAC1B,QAAA;AACK,wBAAA;AACG,0BAAA;AAEJ,UAAA;AAC8B,YAAA;AACC,YAAA;AACV,YAAA;AACrB,UAAA;AAEJ,QAAA;AAAA,MAAA;AAAA,IAAA;AACF,EAAA;AAEJ;AAIyD;AACvD,EAAA;AACA,EAAA;AACU,EAAA;AACK,EAAA;AACf,EAAA;AACA,EAAA;AACa,EAAA;AACb,EAAA;AACiB,EAAA;AACN,EAAA;AACuB,EAAA;AAClC,EAAA;AACA,EAAA;AACW,EAAA;AACX,EAAA;AACA,EAAA;AACc,EAAA;AAAA;AAED,EAAA;AACb,EAAA;AACc,EAAA;AACS,EAAA;AACvB,EAAA;AACe,EAAA;AAAA;AAEL,EAAA;AACI,EAAA;AACS,EAAA;AACV,EAAA;AACM,EAAA;AACnB,EAAA;AACmB;AAEmB,EAAA;AAIE,EAAA;AACb,EAAA;AACC,EAAA;AACJ,IAAA;AACY,IAAA;AACpC,EAAA;AAEqC,EAAA;AACE,IAAA;AACF,IAAA;AACG,MAAA;AACA,MAAA;AACxB,MAAA;AACb,IAAA;AACsB,EAAA;AAGD,EAAA;AAEwB,EAAA;AAGvB,EAAA;AAEF,EAAA;AACe,IAAA;AACH,IAAA;AACnC,EAAA;AAGqD,EAAA;AACf,EAAA;AAIhB,EAAA;AACkB,IAAA;AACD,IAAA;AAClB,MAAA;AACjB,MAAA;AACF,IAAA;AAEmC,IAAA;AACnB,IAAA;AAEmB,IAAA;AAEhB,IAAA;AAIH,IAAA;AACU,IAAA;AACC,MAAA;AACG,MAAA;AACE,QAAA;AACV,QAAA;AACb,MAAA;AAC4B,QAAA;AACR,QAAA;AACK,UAAA;AACV,UAAA;AACpB,QAAA;AACF,MAAA;AACF,IAAA;AAGiB,IAAA;AACmB,IAAA;AACd,MAAA;AACK,MAAA;AACQ,MAAA;AACP,MAAA;AACI,QAAA;AACT,QAAA;AACrB,MAAA;AACF,IAAA;AAE2B,IAAA;AACE,EAAA;AAGD,EAAA;AACL,EAAA;AACL,EAAA;AACoB,IAAA;AACd,IAAA;AAC1B,EAAA;AAGsD,EAAA;AACd,IAAA;AACD,IAAA;AAClB,IAAA;AACrB,EAAA;AAE4C,EAAA;AACd,IAAA;AACI,IAAA;AACF,oBAAA;AAChC,EAAA;AAEmC,EAAA;AAE5B,IAAA;AAEe,IAAA;AACtB,EAAA;AAEgB,EAAA;AACgB,IAAA;AAAoB;AAErC,IAAA;AACf,EAAA;AAEqC,EAAA;AACA,EAAA;AAEb,EAAA;AACa,IAAA;AACrC,EAAA;AAE6B,EAAA;AAGS,EAAA;AACd,EAAA;AAEU,EAAA;AACJ,IAAA;AACM,IAAA;AACJ,IAAA;AACO,EAAA;AAEL,EAAA;AAEE,EAAA;AAEnB,IAAA;AACiB,oBAAA;AAClC,EAAA;AAE2C,EAAA;AACb,EAAA;AACE,IAAA;AACd,IAAA;AAClB,EAAA;AAGwC,EAAA;AAEpB,EAAA;AAME,EAAA;AACa,IAAA;AAAqC;AAE5C,IAAA;AAC5B,EAAA;AAGiE,EAAA;AAEvC,IAAA;AAImD,MAAA;AACjE,MAAA;AAEsB,IAAA;AACP,IAAA;AAC3B,EAAA;AAE8B,EAAA;AACQ,IAAA;AAClB,IAAA;AACI,MAAA;AACtB,IAAA;AACoC,IAAA;AACC,IAAA;AACD,IAAA;AACA,IAAA;AACxB,IAAA;AACI,IAAA;AACc,IAAA;AACnB,IAAA;AACmB,IAAA;AACP,IAAA;AACzB,EAAA;AAGgB,EAAA;AACS,IAAA;AACG,IAAA;AACN,MAAA;AACnB,IAAA;AACH,EAAA;AAE+C,EAAA;AACpB,IAAA;AACW,IAAA;AAEH,IAAA;AACJ,IAAA;AACQ,IAAA;AACA,IAAA;AACD,IAAA;AAET,IAAA;AACJ,IAAA;AAEF,IAAA;AACe,MAAA;AACE,MAAA;AACD,QAAA;AACA,QAAA;AACrB,QAAA;AACb,MAAA;AACwB,MAAA;AAC3B,IAAA;AACF,EAAA;AAOwD,EAAA;AACpB,IAAA;AACA,IAAA;AAC3B,IAAA;AACE,MAAA;AACK,QAAA;AACc,QAAA;AAChB,QAAA;AACV,MAAA;AAEmB,MAAA;AAGrB,IAAA;AACF,EAAA;AAIE,EAAA;AAEkC,IAAA;AACA,IAAA;AAC3B,IAAA;AACE,MAAA;AACK,QAAA;AACc,QAAA;AAChB,QAAA;AACV,MAAA;AAEmB,MAAA;AAGrB,IAAA;AACF,EAAA;AAGqB,EAAA;AAGR,EAAA;AAEJ,IAAA;AAEQ,sBAAA;AACN,sBAAA;AAEP,IAAA;AAEJ,EAAA;AAIE,EAAA;AAEK,IAAA;AAAA,IAAA;AAEY,MAAA;AACT,QAAA;AAC4B,QAAA;AAGnB,MAAA;AACuB,MAAA;AAElC,MAAA;AAAM,wBAAA;AAGC,wBAAA;AAAa,MAAA;AAAA,IAAA;AAZR,IAAA;AAelB,EAAA;AAKA,EAAA;AAG8B,IAAA;AACU,IAAA;AACC,IAAA;AAEnC,IAAA;AAAC,MAAA;AAAA,MAAA;AAEa,QAAA;AAGF,QAAA;AACK,QAAA;AACiB,UAAA;AACH,YAAA;AACD,YAAA;AACP,YAAA;AACV,YAAA;AACR,UAAA;AACH,QAAA;AAEA,QAAA;AAAA,0BAAA;AAAC,YAAA;AAAA,YAAA;AACU,cAAA;AACC,cAAA;AACL,cAAA;AACW,cAAA;AAEhB,cAAA;AAAA,YAAA;AACF,UAAA;AACO,0BAAA;AAAU,QAAA;AAAA,MAAA;AAtBZ,MAAA;AAuBP,IAAA;AAGN,EAAA;AAImC,EAAA;AAInC,EAAA;AAGK,IAAA;AAEM,sBAAA;AAGO,wBAAA;AAAqD,UAAA;AAAK,UAAA;AAAS,QAAA;AAGvE,QAAA;AAGa,UAAA;AAIW,UAAA;AAEhB,YAAA;AAAC,cAAA;AAAA,cAAA;AAEM,gBAAA;AACW,gBAAA;AACO,gBAAA;AACP,gBAAA;AACN,gBAAA;AACI,gBAAA;AACQ,gBAAA;AACE,gBAAA;AACX,kBAAA;AACG,kBAAA;AACD,kBAAA;AACI,kBAAA;AACK,kBAAA;AACtB,gBAAA;AAAA,cAAA;AAdU,cAAA;AAed,YAAA;AAEJ,UAAA;AAGE,UAAA;AAAC,YAAA;AAAA,YAAA;AAEM,cAAA;AACsB,cAAA;AACJ,cAAA;AACP,cAAA;AACA,cAAA;AACN,cAAA;AACY,cAAA;AAEd,cAAA;AAAA,YAAA;AATI,YAAA;AAYd,UAAA;AAAC,YAAA;AAAA,YAAA;AAEM,cAAA;AACsB,cAAA;AACJ,cAAA;AACV,cAAA;AACH,cAAA;AACY,cAAA;AAAqB,YAAA;AAN/B,YAAA;AAQZ,UAAA;AAER,QAAA;AAGF,wBAAA;AAAC,UAAA;AAAA,UAAA;AACW,YAAA;AACD,YAAA;AACE,YAAA;AAEV,YAAA;AAAY,UAAA;AACf,QAAA;AAGN,MAAA;AAGK,sBAAA;AAED,QAAA;AAAC,UAAA;AAAA,UAAA;AACW,YAAA;AACJ,YAAA;AACK,YAAA;AAER,YAAA;AAIM,YAAA;AAAA,UAAA;AACX,QAAA;AAIA,QAAA;AAAC,UAAA;AAAA,UAAA;AACW,YAAA;AACJ,YAAA;AACK,YAAA;AAER,YAAA;AAIM,YAAA;AAAA,UAAA;AACX,QAAA;AAIA,QAAA;AAAC,UAAA;AAAA,UAAA;AACS,YAAA;AACH,YAAA;AACC,YAAA;AACG,YAAA;AACD,YAAA;AAAA,UAAA;AACV,QAAA;AAIA,QAAA;AAAC,UAAA;AAAA,UAAA;AACC,YAAA;AACA,YAAA;AACA,YAAA;AACA,YAAA;AAAA,UAAA;AACF,QAAA;AAEJ,MAAA;AACF,IAAA;AAIG,oBAAA;AACF,MAAA;AAAA,MAAA;AACY,QAAA;AACT,UAAA;AACA,UAAA;AACmB,UAAA;AAGV,QAAA;AAEX,QAAA;AAAO,0BAAA;AAGD,YAAA;AAAC,cAAA;AAAA,cAAA;AACY,gBAAA;AACT,kBAAA;AACA,kBAAA;AACqB,kBAAA;AAGZ,gBAAA;AACJ,gBAAA;AACM,gBAAA;AAEb,gBAAA;AAAC,kBAAA;AAAA,kBAAA;AACM,oBAAA;AACI,oBAAA;AACM,oBAAA;AACL,oBAAA;AACC,oBAAA;AAAA,kBAAA;AACb,gBAAA;AAAA,cAAA;AACF,YAAA;AAKE,YAAA;AACwB,cAAA;AACI,cAAA;AAEjB,cAAA;AACmB,cAAA;AACF,cAAA;AACJ,cAAA;AAGG,cAAA;AACG,cAAA;AAI1B,cAAA;AAAC,gBAAA;AAAA,gBAAA;AAEK,kBAAA;AACJ,kBAAA;AACA,kBAAA;AACqB,kBAAA;AACrB,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACA,kBAAA;AACa,kBAAA;AACM,kBAAA;AAAiB,gBAAA;AAX/B,gBAAA;AAYP,cAAA;AAGgB,YAAA;AACI,cAAA;AACI,cAAA;AAEjB,cAAA;AACiB,cAAA;AACA,cAAA;AACJ,cAAA;AACG,cAAA;AACF,cAAA;AACK,cAAA;AAI1B,cAAA;AAAC,gBAAA;AAAA,gBAAA;AAEY,kBAAA;AACT,oBAAA;AACA,oBAAA;AACa,oBAAA;AACO,oBAAA;AACpB,oBAAA;AACA,oBAAA;AAGM,kBAAA;AACQ,kBAAA;AACF,kBAAA;AACC,kBAAA;AAEf,kBAAA;AACG,oCAAA;AAEC,oBAAA;AACqB,sBAAA;AACA,sBAAA;AACA,sBAAA;AACrB,oBAAA;AAEJ,kBAAA;AAAA,gBAAA;AAxBK,gBAAA;AAyBP,cAAA;AAEH,YAAA;AAET,UAAA;AAEG,0BAAA;AAEuB,YAAA;AAGQ,YAAA;AACT,YAAA;AAGjB,YAAA;AAAC,cAAA;AAAA,cAAA;AAEY,gBAAA;AACT,kBAAA;AACa,kBAAA;AACA,kBAAA;AAGJ,gBAAA;AACI,gBAAA;AAEd,gBAAA;AACC,kBAAA;AAAC,oBAAA;AAAA,oBAAA;AACY,sBAAA;AACT,wBAAA;AACA,wBAAA;AACA,wBAAA;AAGC,sBAAA;AACI,sBAAA;AACS,sBAAA;AACI,wBAAA;AACL,wBAAA;AACf,sBAAA;AAMA,sBAAA;AACG,wBAAA;AAAA,wBAAA;AACM,0BAAA;AACI,0BAAA;AACO,0BAAA;AACJ,0BAAA;AAA6B,wBAAA;AAE7C,sBAAA;AAAA,oBAAA;AACF,kBAAA;AAEmB,kBAAA;AACG,oBAAA;AAEb,oBAAA;AAIkE,sBAAA;AACjE,sBAAA;AAEsB,oBAAA;AAEb,oBAAA;AAEjB,oBAAA;AACgB,oBAAA;AACZ,oBAAA;AACS,oBAAA;AAIb,oBAAA;AAAC,sBAAA;AAAA,sBAAA;AAEY,wBAAA;AACT,0BAAA;AACA,0BAAA;AACA,0BAAA;AACA,0BAAA;AAGC,wBAAA;AACa,wBAAA;AASP,wBAAA;AAED,wBAAA;AAAwD,sBAAA;AApB3D,sBAAA;AAqBP,oBAAA;AAEH,kBAAA;AAAA,gBAAA;AAAA,cAAA;AApFI,cAAA;AAqFP,YAAA;AAIH,UAAA;AACE,YAAA;AAAA,YAAA;AACuB,cAAA;AACZ,cAAA;AAEG,cAAA;AACV,gBAAA;AAAA,gBAAA;AACO,kBAAA;AACA,kBAAA;AACM,kBAAA;AAEV,kBAAA;AACG,oBAAA;AAAA,oBAAA;AACM,sBAAA;AACG,sBAAA;AACF,sBAAA;AACS,sBAAA;AAChB,sBAAA;AAAA,oBAAA;AAGC,kBAAA;AAED,kBAAA;AAAA,gBAAA;AAGP,cAAA;AAAC,gBAAA;AAAA,gBAAA;AACO,kBAAA;AACC,kBAAA;AACK,kBAAA;AACP,kBAAA;AAAA,gBAAA;AACP,cAAA;AAAA,YAAA;AAKV,UAAA;AAAA,QAAA;AAAA,MAAA;AAEJ,IAAA;AAIG,IAAA;AAGM,MAAA;AAAA,MAAA;AACO,QAAA;AACN,QAAA;AACU,QAAA;AACqB,QAAA;AACrB,QAAA;AACQ,QAAA;AAClB,QAAA;AACK,QAAA;AAAA,MAAA;AAGD,IAAA;AAAqC,MAAA;AAC3B,MAAA;AAAO,MAAA;AAAwB,uBAAA;AAAO,MAAA;AAI5D,IAAA;AAEJ,EAAA;AAIoB,EAAA;AAEjB,IAAA;AAML,EAAA;AAEO,EAAA;AACT;ADrN0C;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-LEZ4HSBD.cjs","sourcesContent":[null,"import { useState, useMemo, useLayoutEffect, useRef } from 'react';\r\nimport React from 'react';\r\nimport {\r\n  ChevronsUpDown,\r\n  ArrowUp,\r\n  ArrowDown,\r\n  X,\r\n  Check,\r\n  Download,\r\n  Columns3,\r\n  AlignJustify,\r\n  GripVertical,\r\n  FolderOpen,\r\n  SearchX,\r\n} from 'lucide-react';\r\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\r\nimport type { DragEndEvent } from '@dnd-kit/core';\r\nimport {\r\n  SortableContext,\r\n  horizontalListSortingStrategy,\r\n  useSortable,\r\n  sortableKeyboardCoordinates,\r\n  arrayMove,\r\n} from '@dnd-kit/sortable';\r\nimport { CSS } from '@dnd-kit/utilities';\r\nimport type { TableColumn, TableProps, TableFilters, FilterValue } from './Table.types';\r\n\r\nexport type { TableColumn, TableProps, TableFilters, FilterValue };\r\nimport { Button } from '../Button';\r\nimport { Checkbox } from '../Checkbox';\r\nimport { Dropdown } from '../Dropdown';\r\nimport { EmptyState } from '../EmptyState';\r\nimport { Pagination } from '../Pagination';\r\nimport { SplitButton } from '../SplitButton';\r\nimport { Spinner } from '../Spinner';\r\nimport { TableFiltersDropdown } from './TableFiltersDropdown.component';\r\n\r\n// ── Types ─────────────────────────────────────────────────────────────────────\r\n\r\ntype Density = 'compact' | 'comfortable' | 'spacious';\r\n\r\nconst DENSITY_OPTIONS: { value: Density; label: string }[] = [\r\n  { value: 'compact', label: 'Compact' },\r\n  { value: 'comfortable', label: 'Comfortable' },\r\n  { value: 'spacious', label: 'Spacious' },\r\n];\r\n\r\n// ── CSV helpers ───────────────────────────────────────────────────────────────\r\n\r\nfunction escapeCsvValue(value: string): string {\r\n  if (value.includes(',') || value.includes('\\n') || value.includes('\"')) {\r\n    return `\"${value.replace(/\"/g, '\"\"')}\"`;\r\n  }\r\n  return value;\r\n}\r\n\r\n// ── SortableColumnHeader ──────────────────────────────────────────────────────\r\n// Defined as a standalone component so it can legally call useSortable().\r\n// Only rendered when draggableColumns=true (inside a DndContext + SortableContext).\r\n\r\ninterface SortableThProps {\r\n  id: string;\r\n  column: { label: string };\r\n  isSortable: boolean;\r\n  isCurrentlySorted: boolean;\r\n  sortDirection: 'asc' | 'desc' | null;\r\n  alignment: string;\r\n  columnType: string;\r\n  columnWidth: string | undefined;\r\n  pinnedClass: string;\r\n  stickyStyle: React.CSSProperties;\r\n  onSortClick: () => void;\r\n}\r\n\r\nfunction SortableColumnHeader({\r\n  id,\r\n  column,\r\n  isSortable,\r\n  isCurrentlySorted,\r\n  sortDirection,\r\n  alignment,\r\n  columnType,\r\n  columnWidth,\r\n  pinnedClass,\r\n  stickyStyle,\r\n  onSortClick,\r\n}: SortableThProps) {\r\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\r\n    id,\r\n  });\r\n\r\n  const transformStr = CSS.Transform.toString(transform);\r\n\r\n  const thClassName = [\r\n    'eidos-table-header-cell',\r\n    `eidos-table-header-cell-${columnType}`,\r\n    isSortable ? 'eidos-table-sortable' : '',\r\n    isCurrentlySorted ? 'eidos-table-sorted' : '',\r\n    `eidos-table-align-${alignment}`,\r\n    pinnedClass,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <th\r\n      ref={setNodeRef as React.LegacyRef<HTMLTableCellElement>}\r\n      className={thClassName}\r\n      style={{\r\n        width: columnWidth,\r\n        ...stickyStyle,\r\n        ...(transformStr ? { transform: transformStr } : {}),\r\n        transition: transition ?? undefined,\r\n        opacity: isDragging ? 0.5 : 1,\r\n      }}\r\n      data-col-key={id}\r\n      onClick={() => isSortable && onSortClick()}\r\n      {...attributes}\r\n    >\r\n      {/* Grip - absolutely positioned in the left padding zone so it never\r\n          displaces the column label or causes layout shift on hover. */}\r\n      <span\r\n        className=\"eidos-table-drag-handle\"\r\n        {...listeners}\r\n        onClick={(e) => e.stopPropagation()}\r\n        title=\"Drag to reorder\"\r\n      >\r\n        <GripVertical size={12} />\r\n      </span>\r\n      <div className={`eidos-table-header-content eidos-table-align-${alignment}`}>\r\n        <span className=\"eidos-table-header-label\">{column.label}</span>\r\n        {isSortable && (\r\n          <div className=\"eidos-table-sort-indicator\">\r\n            {sortDirection === 'asc' && <ArrowUp size={14} />}\r\n            {sortDirection === 'desc' && <ArrowDown size={14} />}\r\n            {!sortDirection && <ChevronsUpDown size={14} />}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </th>\r\n  );\r\n}\r\n\r\n// ── Table ─────────────────────────────────────────────────────────────────────\r\n\r\nexport const Table = <T extends Record<string, unknown>>({\r\n  data,\r\n  columns,\r\n  loading = false,\r\n  emptyMessage = 'No data available',\r\n  onRowClick,\r\n  className,\r\n  showFooter = false,\r\n  totalItems,\r\n  showPagination = false,\r\n  pageSize = 25,\r\n  pageSizeOptions = [10, 25, 50, 100],\r\n  onSortChange,\r\n  currentSort,\r\n  filters = {},\r\n  onFiltersChange,\r\n  defaultFilters,\r\n  showFilters = false,\r\n  // Selection\r\n  selectable = false,\r\n  rowKey,\r\n  selectedRows: controlledSelected,\r\n  defaultSelectedRows = [],\r\n  onSelectionChange,\r\n  bulkActions = [],\r\n  // New features\r\n  density = 'comfortable',\r\n  showDensity = false,\r\n  showColumnVisibility = false,\r\n  showExport = false,\r\n  draggableColumns = false,\r\n  onColumnReorder,\r\n}: TableProps<T>) => {\r\n  // ── Column ordering (drag-reorder) ────────────────────────────────────────\r\n  const [columnOrder, setColumnOrder] = useState<string[]>(() => columns.map((c) => String(c.key)));\r\n\r\n  // Derived-state reset: when the set of column keys changes, reset the order.\r\n  // Calling setState during render is the React-idiomatic way to do this.\r\n  const columnKeysSignature = columns.map((c) => String(c.key)).join('\\0');\r\n  const prevKeysRef = useRef(columnKeysSignature);\r\n  if (prevKeysRef.current !== columnKeysSignature) {\r\n    prevKeysRef.current = columnKeysSignature;\r\n    setColumnOrder(columns.map((c) => String(c.key)));\r\n  }\r\n\r\n  const orderedColumns = useMemo(() => {\r\n    const orderMap = new Map(columnOrder.map((key, idx) => [key, idx]));\r\n    return [...columns].sort((a, b) => {\r\n      const ai = orderMap.get(String(a.key)) ?? Infinity;\r\n      const bi = orderMap.get(String(b.key)) ?? Infinity;\r\n      return ai - bi;\r\n    });\r\n  }, [columns, columnOrder]);\r\n\r\n  // ── Density (internal state when showDensity=true) ────────────────────────\r\n  const [internalDensity, setInternalDensity] = useState<Density>(density as Density);\r\n  // When showDensity is true the table owns density; otherwise respect the prop.\r\n  const effectiveDensity: Density = showDensity ? internalDensity : (density as Density);\r\n\r\n  // ── Column visibility ─────────────────────────────────────────────────────\r\n  const [hiddenColumnKeys, setHiddenColumnKeys] = useState<Set<string>>(() => new Set<string>());\r\n\r\n  const visibleColumns = useMemo(\r\n    () => orderedColumns.filter((c) => !hiddenColumnKeys.has(String(c.key))),\r\n    [orderedColumns, hiddenColumnKeys],\r\n  );\r\n\r\n  // ── Pinned / sticky columns ────────────────────────────────────────────────\r\n  const theadRef = useRef<HTMLTableSectionElement>(null);\r\n  const [pinnedOffsets, setPinnedOffsets] = useState<\r\n    Map<string, { side: 'left' | 'right'; offset: number }>\r\n  >(new Map());\r\n\r\n  useLayoutEffect(() => {\r\n    const hasPinned = visibleColumns.some((c) => c.pin);\r\n    if (!hasPinned || !theadRef.current) {\r\n      setPinnedOffsets(new Map());\r\n      return;\r\n    }\r\n\r\n    const headerRow = theadRef.current.querySelector('tr');\r\n    if (!headerRow) return;\r\n\r\n    const cells = Array.from(headerRow.querySelectorAll<HTMLTableCellElement>('th[data-col-key]'));\r\n\r\n    const newOffsets = new Map<string, { side: 'left' | 'right'; offset: number }>();\r\n\r\n    // Left-pinned: scan left-to-right.\r\n    // Checkbox (when selectable) counts as a left-pinned element.\r\n    let leftAccum = 0;\r\n    for (const cell of cells) {\r\n      const key = cell.dataset.colKey!;\r\n      if (key === '__checkbox__') {\r\n        newOffsets.set(key, { side: 'left', offset: leftAccum });\r\n        leftAccum += cell.offsetWidth;\r\n      } else {\r\n        const col = visibleColumns.find((c) => String(c.key) === key);\r\n        if (col?.pin === 'left') {\r\n          newOffsets.set(key, { side: 'left', offset: leftAccum });\r\n          leftAccum += cell.offsetWidth;\r\n        }\r\n      }\r\n    }\r\n\r\n    // Right-pinned: scan right-to-left.\r\n    let rightAccum = 0;\r\n    for (let i = cells.length - 1; i >= 0; i--) {\r\n      const cell = cells[i];\r\n      const key = cell.dataset.colKey!;\r\n      const col = visibleColumns.find((c) => String(c.key) === key);\r\n      if (col?.pin === 'right') {\r\n        newOffsets.set(key, { side: 'right', offset: rightAccum });\r\n        rightAccum += cell.offsetWidth;\r\n      }\r\n    }\r\n\r\n    setPinnedOffsets(newOffsets);\r\n  }, [visibleColumns, selectable]);\r\n\r\n  // ── Selection state (controlled / uncontrolled) ──────────────────────────\r\n  const isControlledSelection = controlledSelected !== undefined;\r\n  const [internalSelected, setInternalSelected] = useState<string[]>(defaultSelectedRows);\r\n  const selectedSet = useMemo(\r\n    () => new Set(isControlledSelection ? controlledSelected : internalSelected),\r\n    [isControlledSelection, controlledSelected, internalSelected],\r\n  );\r\n\r\n  /** Stable string key for a row - uses `rowKey` prop, then \"id\", then index. */\r\n  const getRowKey = (item: T, index: number): string => {\r\n    if (rowKey) return String(item[rowKey]);\r\n    if ('id' in item) return String(item.id);\r\n    return String(index);\r\n  };\r\n\r\n  const commitSelection = (keys: string[]) => {\r\n    if (!isControlledSelection) setInternalSelected(keys);\r\n    const rows = data.filter((item, idx) => keys.includes(getRowKey(item, idx)));\r\n    onSelectionChange?.(keys, rows);\r\n  };\r\n\r\n  const toggleRow = (key: string) => {\r\n    const next = selectedSet.has(key)\r\n      ? [...selectedSet].filter((k) => k !== key)\r\n      : [...selectedSet, key];\r\n    commitSelection(next);\r\n  };\r\n\r\n  const allKeys = useMemo(\r\n    () => data.map((item, idx) => getRowKey(item, idx)),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [data, rowKey],\r\n  );\r\n\r\n  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));\r\n  const someSelected = !allSelected && allKeys.some((k) => selectedSet.has(k));\r\n\r\n  const toggleAll = () => {\r\n    commitSelection(allSelected ? [] : allKeys);\r\n  };\r\n\r\n  const clearSelection = () => commitSelection([]);\r\n\r\n  // ── Pagination ────────────────────────────────────────────────────────────\r\n  const [currentPage, setCurrentPage] = useState(1);\r\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\r\n\r\n  const displayData = useMemo(() => {\r\n    if (!showPagination) return data;\r\n    const startIndex = (currentPage - 1) * currentPageSize;\r\n    return data.slice(startIndex, startIndex + currentPageSize);\r\n  }, [data, showPagination, currentPage, currentPageSize]);\r\n\r\n  const totalPages = Math.ceil(data.length / currentPageSize);\r\n\r\n  const handleSort = (key: string) => {\r\n    const newDirection =\r\n      currentSort?.key === key && currentSort?.direction === 'asc' ? 'desc' : 'asc';\r\n    onSortChange?.(key, newDirection);\r\n  };\r\n\r\n  const handlePageChange = (page: number) => setCurrentPage(page);\r\n  const handlePageSizeChange = (newPageSize: number) => {\r\n    setCurrentPageSize(newPageSize);\r\n    setCurrentPage(1);\r\n  };\r\n\r\n  // ── Derived UI state ──────────────────────────────────────────────────────\r\n  const hasSelection = selectedSet.size > 0;\r\n  const showToolbar =\r\n    (showFilters && !!onFiltersChange) ||\r\n    showColumnVisibility ||\r\n    showExport ||\r\n    showDensity ||\r\n    (selectable && hasSelection);\r\n\r\n  const selectedItems = useMemo(\r\n    () => data.filter((item, idx) => selectedSet.has(getRowKey(item, idx))),\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    [data, selectedSet, rowKey],\r\n  );\r\n\r\n  // ── CSV Export ────────────────────────────────────────────────────────────\r\n  const getRawValue = (item: T, column: TableColumn<T>): string => {\r\n    const value =\r\n      typeof column.key === 'string' && column.key.includes('.')\r\n        ? (column.key as string)\r\n            .split('.')\r\n            .reduce(\r\n              (obj: unknown, k: string) => (obj as Record<string, unknown>)?.[k],\r\n              item as unknown,\r\n            )\r\n        : item[column.key as keyof T];\r\n    return String(value ?? '');\r\n  };\r\n\r\n  const handleExportCsv = () => {\r\n    const headers = visibleColumns.map((c) => escapeCsvValue(c.label)).join(',');\r\n    const rows = data.map((item) =>\r\n      visibleColumns.map((col) => escapeCsvValue(getRawValue(item, col))).join(','),\r\n    );\r\n    const csv = [headers, ...rows].join('\\n');\r\n    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\r\n    const url = URL.createObjectURL(blob);\r\n    const link = document.createElement('a');\r\n    link.href = url;\r\n    link.download = 'export.csv';\r\n    document.body.appendChild(link);\r\n    link.click();\r\n    document.body.removeChild(link);\r\n    URL.revokeObjectURL(url);\r\n  };\r\n\r\n  // ── DnD setup ─────────────────────────────────────────────────────────────\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor),\r\n    useSensor(KeyboardSensor, {\r\n      coordinateGetter: sortableKeyboardCoordinates,\r\n    }),\r\n  );\r\n\r\n  const handleDragEnd = (event: DragEndEvent) => {\r\n    const { active, over } = event;\r\n    if (!over || active.id === over.id) return;\r\n\r\n    const activeId = String(active.id);\r\n    const overId = String(over.id);\r\n    const oldIndex = columnOrder.indexOf(activeId);\r\n    const newIndex = columnOrder.indexOf(overId);\r\n    if (oldIndex === -1 || newIndex === -1) return;\r\n\r\n    const newOrder = arrayMove(columnOrder, oldIndex, newIndex);\r\n    setColumnOrder(newOrder);\r\n\r\n    if (onColumnReorder) {\r\n      const orderMap = new Map(newOrder.map((key, idx) => [key, idx]));\r\n      const reordered = [...columns].sort((a, b) => {\r\n        const ai = orderMap.get(String(a.key)) ?? Infinity;\r\n        const bi = orderMap.get(String(b.key)) ?? Infinity;\r\n        return ai - bi;\r\n      });\r\n      onColumnReorder(reordered);\r\n    }\r\n  };\r\n\r\n  // ── Helpers ───────────────────────────────────────────────────────────────\r\n\r\n  /** Returns sticky style + className for body <td> cells (zIndex: 1). */\r\n  const getCellPinnedProps = (\r\n    colKey: string,\r\n  ): { style: React.CSSProperties; className: string } => {\r\n    const pinInfo = pinnedOffsets.get(colKey);\r\n    if (!pinInfo) return { style: {}, className: '' };\r\n    return {\r\n      style: {\r\n        position: 'sticky',\r\n        [pinInfo.side]: pinInfo.offset,\r\n        zIndex: 1,\r\n      },\r\n      className:\r\n        pinInfo.side === 'left'\r\n          ? 'eidos-table-cell--pinned-left'\r\n          : 'eidos-table-cell--pinned-right',\r\n    };\r\n  };\r\n\r\n  /** Returns sticky style + className for header <th> cells (zIndex: 3). */\r\n  const getHeaderPinnedProps = (\r\n    colKey: string,\r\n  ): { style: React.CSSProperties; className: string } => {\r\n    const pinInfo = pinnedOffsets.get(colKey);\r\n    if (!pinInfo) return { style: {}, className: '' };\r\n    return {\r\n      style: {\r\n        position: 'sticky',\r\n        [pinInfo.side]: pinInfo.offset,\r\n        zIndex: 3,\r\n      },\r\n      className:\r\n        pinInfo.side === 'left'\r\n          ? 'eidos-table-header-cell--pinned-left'\r\n          : 'eidos-table-header-cell--pinned-right',\r\n    };\r\n  };\r\n\r\n  // ── Density class ─────────────────────────────────────────────────────────\r\n  const densityClass = effectiveDensity !== 'comfortable' ? `eidos-table--${effectiveDensity}` : '';\r\n\r\n  // ── Loading ───────────────────────────────────────────────────────────────\r\n  if (loading) {\r\n    return (\r\n      <div className={`eidos-table-container ${className || ''}`}>\r\n        <div className=\"eidos-table-loading\">\r\n          <Spinner size=\"md\" />\r\n          <p>Loading...</p>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // ── Density panel (Dropdown content) ──────────────────────────────────────\r\n  const densityPanel = (\r\n    <div className=\"eidos-table-menu-panel\">\r\n      {DENSITY_OPTIONS.map((option) => (\r\n        <button\r\n          key={option.value}\r\n          className={[\r\n            'eidos-table-menu-item',\r\n            effectiveDensity === option.value ? 'eidos-table-menu-item--active' : '',\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          onClick={() => setInternalDensity(option.value)}\r\n        >\r\n          <span className=\"eidos-table-menu-item-check\">\r\n            {effectiveDensity === option.value && <Check size={14} />}\r\n          </span>\r\n          <span>{option.label}</span>\r\n        </button>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  // ── Column visibility panel (Dropdown content) ────────────────────────────\r\n  const columnVisibilityPanel = (\r\n    <div className=\"eidos-table-menu-panel\">\r\n      {/* Use orderedColumns so list order mirrors current column order */}\r\n      {orderedColumns.map((col) => {\r\n        const key = String(col.key);\r\n        const isVisible = !hiddenColumnKeys.has(key);\r\n        const isLastVisible = visibleColumns.length === 1 && isVisible;\r\n        return (\r\n          <button\r\n            key={key}\r\n            className={['eidos-table-menu-item', isVisible ? 'eidos-table-menu-item--active' : '']\r\n              .filter(Boolean)\r\n              .join(' ')}\r\n            disabled={isLastVisible}\r\n            onClick={() => {\r\n              setHiddenColumnKeys((prev) => {\r\n                const next = new Set(prev);\r\n                if (next.has(key)) next.delete(key);\r\n                else next.add(key);\r\n                return next;\r\n              });\r\n            }}\r\n          >\r\n            <Checkbox\r\n              checked={isVisible}\r\n              disabled={isLastVisible}\r\n              size=\"sm\"\r\n              onChange={() => {\r\n                /* click handled by parent button */\r\n              }}\r\n            />\r\n            <span>{col.label}</span>\r\n          </button>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n\r\n  // ── SortableContext items: visible column keys only ───────────────────────\r\n  const sortableItems = visibleColumns.map((c) => String(c.key));\r\n\r\n  // ── Main JSX ──────────────────────────────────────────────────────────────\r\n  const tableContent = (\r\n    <div className={`eidos-table-container ${className || ''}`}>\r\n      {/* ── Toolbar ───────────────────────────────────────────────────────── */}\r\n      {showToolbar && (\r\n        <div className=\"eidos-table-toolbar\">\r\n          {/* Left - bulk actions / selection info */}\r\n          <div className=\"eidos-table-toolbar-left\">\r\n            {selectable && hasSelection && (\r\n              <>\r\n                <span className=\"eidos-table-selection-count\">{selectedSet.size} selected</span>\r\n\r\n                {bulkActions.length > 0 && (\r\n                  <div className=\"eidos-table-bulk-actions\">\r\n                    {bulkActions.map((action) => {\r\n                      const isDisabled =\r\n                        typeof action.disabled === 'function'\r\n                          ? action.disabled(selectedItems)\r\n                          : (action.disabled ?? false);\r\n\r\n                      if (action.type === 'split-button') {\r\n                        return (\r\n                          <SplitButton\r\n                            key={action.id}\r\n                            size=\"sm\"\r\n                            variant={action.variant ?? 'outlined'}\r\n                            color={action.color ?? 'secondary'}\r\n                            preIcon={action.icon}\r\n                            disabled={isDisabled}\r\n                            label={action.label}\r\n                            onClick={() => action.onClick(selectedItems)}\r\n                            options={action.options.map((option) => ({\r\n                              id: option.id,\r\n                              label: option.label,\r\n                              icon: option.icon,\r\n                              disabled: option.disabled,\r\n                              onClick: () => option.onClick(selectedItems),\r\n                            }))}\r\n                          />\r\n                        );\r\n                      }\r\n\r\n                      return action.label ? (\r\n                        <Button\r\n                          key={action.id}\r\n                          size=\"sm\"\r\n                          variant={action.variant ?? 'outlined'}\r\n                          color={action.color ?? 'secondary'}\r\n                          preIcon={action.icon}\r\n                          posIcon={action.posIcon}\r\n                          disabled={isDisabled}\r\n                          onClick={() => action.onClick(selectedItems)}\r\n                        >\r\n                          {action.label}\r\n                        </Button>\r\n                      ) : action.icon ? (\r\n                        <Button\r\n                          key={action.id}\r\n                          size=\"sm\"\r\n                          variant={action.variant ?? 'outlined'}\r\n                          color={action.color ?? 'secondary'}\r\n                          icon={action.icon}\r\n                          disabled={isDisabled}\r\n                          onClick={() => action.onClick(selectedItems)}\r\n                        />\r\n                      ) : null;\r\n                    })}\r\n                  </div>\r\n                )}\r\n\r\n                <button\r\n                  className=\"eidos-table-clear-selection\"\r\n                  onClick={clearSelection}\r\n                  aria-label=\"Clear selection\"\r\n                >\r\n                  <X size={14} />\r\n                </button>\r\n              </>\r\n            )}\r\n          </div>\r\n\r\n          {/* Right - density, column visibility, export, filter */}\r\n          <div className=\"eidos-table-toolbar-right\">\r\n            {showDensity && (\r\n              <Dropdown\r\n                placement=\"bottom\"\r\n                align=\"end\"\r\n                autoWidth={false}\r\n                trigger={\r\n                  <Button variant=\"text\" size=\"sm\" preIcon={AlignJustify}>\r\n                    Density\r\n                  </Button>\r\n                }\r\n                content={densityPanel}\r\n              />\r\n            )}\r\n\r\n            {showColumnVisibility && (\r\n              <Dropdown\r\n                placement=\"bottom\"\r\n                align=\"end\"\r\n                autoWidth={false}\r\n                trigger={\r\n                  <Button variant=\"text\" size=\"sm\" preIcon={Columns3}>\r\n                    Columns\r\n                  </Button>\r\n                }\r\n                content={columnVisibilityPanel}\r\n              />\r\n            )}\r\n\r\n            {showExport && (\r\n              <Button\r\n                variant=\"text\"\r\n                size=\"sm\"\r\n                icon={Download}\r\n                onClick={handleExportCsv}\r\n                tooltip=\"Export CSV\"\r\n              />\r\n            )}\r\n\r\n            {showFilters && onFiltersChange && (\r\n              <TableFiltersDropdown\r\n                columns={columns}\r\n                filters={filters}\r\n                onFiltersChange={onFiltersChange}\r\n                defaultFilters={defaultFilters}\r\n              />\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n\r\n      {/* ── Table (wrapped for horizontal scroll) ─────────────────────────── */}\r\n      <div className=\"eidos-table-scroll\">\r\n        <table\r\n          className={[\r\n            'eidos-table',\r\n            densityClass,\r\n            draggableColumns ? 'eidos-table--draggable-columns' : '',\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n        >\r\n          <thead ref={theadRef}>\r\n            <tr>\r\n              {selectable && (\r\n                <th\r\n                  className={[\r\n                    'eidos-table-header-cell',\r\n                    'eidos-table-checkbox-cell',\r\n                    getHeaderPinnedProps('__checkbox__').className,\r\n                  ]\r\n                    .filter(Boolean)\r\n                    .join(' ')}\r\n                  style={getHeaderPinnedProps('__checkbox__').style}\r\n                  data-col-key=\"__checkbox__\"\r\n                >\r\n                  <Checkbox\r\n                    size=\"sm\"\r\n                    checked={allSelected}\r\n                    indeterminate={someSelected}\r\n                    onChange={toggleAll}\r\n                    aria-label=\"Select all rows\"\r\n                  />\r\n                </th>\r\n              )}\r\n\r\n              {/* ── Headers: draggable or plain ──────────────────────────── */}\r\n              {draggableColumns\r\n                ? visibleColumns.map((column) => {\r\n                    const colKey = String(column.key);\r\n                    const columnType = column.type || 'data';\r\n                    const columnWidth =\r\n                      column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\r\n                    const isSortable = !!column.sortable;\r\n                    const isCurrentlySorted = currentSort?.key === colKey;\r\n                    const sortDirection = isCurrentlySorted\r\n                      ? (currentSort!.direction as 'asc' | 'desc')\r\n                      : null;\r\n                    const alignment = column.align || 'left';\r\n                    const { style: pinnedStyle, className: pinnedClass } =\r\n                      getHeaderPinnedProps(colKey);\r\n\r\n                    return (\r\n                      <SortableColumnHeader\r\n                        key={colKey}\r\n                        id={colKey}\r\n                        column={column}\r\n                        isSortable={isSortable}\r\n                        isCurrentlySorted={!!isCurrentlySorted}\r\n                        sortDirection={sortDirection}\r\n                        alignment={alignment}\r\n                        columnType={columnType}\r\n                        columnWidth={columnWidth}\r\n                        pinnedClass={pinnedClass}\r\n                        stickyStyle={pinnedStyle}\r\n                        onSortClick={() => handleSort(colKey)}\r\n                      />\r\n                    );\r\n                  })\r\n                : visibleColumns.map((column, index) => {\r\n                    const colKey = String(column.key);\r\n                    const columnType = column.type || 'data';\r\n                    const columnWidth =\r\n                      column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\r\n                    const isSortable = column.sortable;\r\n                    const isCurrentlySorted = currentSort?.key === colKey;\r\n                    const sortDirection = isCurrentlySorted ? currentSort!.direction : null;\r\n                    const alignment = column.align || 'left';\r\n                    const alignmentClass = `eidos-table-align-${alignment}`;\r\n                    const { style: pinnedStyle, className: pinnedClass } =\r\n                      getHeaderPinnedProps(colKey);\r\n\r\n                    return (\r\n                      <th\r\n                        key={index}\r\n                        className={[\r\n                          'eidos-table-header-cell',\r\n                          `eidos-table-header-cell-${columnType}`,\r\n                          isSortable ? 'eidos-table-sortable' : '',\r\n                          isCurrentlySorted ? 'eidos-table-sorted' : '',\r\n                          alignmentClass,\r\n                          pinnedClass,\r\n                        ]\r\n                          .filter(Boolean)\r\n                          .join(' ')}\r\n                        style={{ width: columnWidth, ...pinnedStyle }}\r\n                        data-col-key={colKey}\r\n                        onClick={() => isSortable && handleSort(colKey)}\r\n                      >\r\n                        <div className={`eidos-table-header-content ${alignmentClass}`}>\r\n                          <span>{column.label}</span>\r\n                          {isSortable && (\r\n                            <div className=\"eidos-table-sort-indicator\">\r\n                              {sortDirection === 'asc' && <ArrowUp size={14} />}\r\n                              {sortDirection === 'desc' && <ArrowDown size={14} />}\r\n                              {!sortDirection && <ChevronsUpDown size={14} />}\r\n                            </div>\r\n                          )}\r\n                        </div>\r\n                      </th>\r\n                    );\r\n                  })}\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            {displayData.length > 0 ? (\r\n              displayData.map((item, rowIndex) => {\r\n                const globalIndex = showPagination\r\n                  ? (currentPage - 1) * currentPageSize + rowIndex\r\n                  : rowIndex;\r\n                const key = getRowKey(item, globalIndex);\r\n                const isSelected = selectedSet.has(key);\r\n\r\n                return (\r\n                  <tr\r\n                    key={key}\r\n                    className={[\r\n                      'eidos-table-row',\r\n                      onRowClick ? 'eidos-table-clickable' : '',\r\n                      isSelected ? 'eidos-table-row--selected' : '',\r\n                    ]\r\n                      .filter(Boolean)\r\n                      .join(' ')}\r\n                    onClick={() => onRowClick?.(item)}\r\n                  >\r\n                    {selectable && (\r\n                      <td\r\n                        className={[\r\n                          'eidos-table-cell',\r\n                          'eidos-table-checkbox-cell',\r\n                          getCellPinnedProps('__checkbox__').className,\r\n                        ]\r\n                          .filter(Boolean)\r\n                          .join(' ')}\r\n                        style={getCellPinnedProps('__checkbox__').style}\r\n                        onClick={(e) => {\r\n                          e.stopPropagation();\r\n                          toggleRow(key);\r\n                        }}\r\n                      >\r\n                        {/* Wrap in a span so Checkbox click-events don't\r\n                            bubble to the <td> and cause a double-toggle.\r\n                            The <td> onClick handles toggling when the user\r\n                            clicks the cell margin outside the checkbox. */}\r\n                        <span onClick={(e) => e.stopPropagation()}>\r\n                          <Checkbox\r\n                            size=\"sm\"\r\n                            checked={isSelected}\r\n                            onChange={() => toggleRow(key)}\r\n                            aria-label={`Select row ${globalIndex + 1}`}\r\n                          />\r\n                        </span>\r\n                      </td>\r\n                    )}\r\n                    {visibleColumns.map((column, colIndex) => {\r\n                      const colKey = String(column.key);\r\n                      const value =\r\n                        typeof column.key === 'string' && column.key.includes('.')\r\n                          ? (column.key as string)\r\n                              .split('.')\r\n                              .reduce(\r\n                                (obj: unknown, k: string) => (obj as Record<string, unknown>)?.[k],\r\n                                item as unknown,\r\n                              )\r\n                          : item[column.key as keyof T];\r\n\r\n                      const columnType = column.type || 'data';\r\n                      const columnWidth =\r\n                        column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\r\n                      const alignment = column.align || 'left';\r\n                      const alignmentClass = `eidos-table-align-${alignment}`;\r\n                      const { style: pinnedStyle, className: pinnedClass } =\r\n                        getCellPinnedProps(colKey);\r\n\r\n                      return (\r\n                        <td\r\n                          key={colIndex}\r\n                          className={[\r\n                            'eidos-table-cell',\r\n                            `eidos-table-cell-${columnType}`,\r\n                            alignmentClass,\r\n                            pinnedClass,\r\n                          ]\r\n                            .filter(Boolean)\r\n                            .join(' ')}\r\n                          style={{ width: columnWidth, ...pinnedStyle }}\r\n                          // `type: 'action'` cells exist specifically to hold\r\n                          // interactive controls (a row-actions Menu/button,\r\n                          // typically) - without this, clicking them bubbles\r\n                          // straight into `onRowClick` on the <tr> below,\r\n                          // e.g. opening a details drawer at the same time as\r\n                          // (or instead of) the action itself. Mirrors the\r\n                          // selectable checkbox cell's own stopPropagation\r\n                          // above, for the same reason.\r\n                          onClick={columnType === 'action' ? (e) => e.stopPropagation() : undefined}\r\n                        >\r\n                          {column.render ? column.render(value, item) : String(value ?? '')}\r\n                        </td>\r\n                      );\r\n                    })}\r\n                  </tr>\r\n                );\r\n              })\r\n            ) : (\r\n              <tr className=\"eidos-table-empty-row\">\r\n                <td\r\n                  colSpan={selectable ? visibleColumns.length + 1 : visibleColumns.length}\r\n                  className=\"eidos-table-cell eidos-table-empty-cell\"\r\n                >\r\n                  {Object.keys(filters).length > 0 ? (\r\n                    <EmptyState\r\n                      icon={<SearchX />}\r\n                      title=\"No results found\"\r\n                      description=\"Try adjusting your filters or search terms.\"\r\n                      action={\r\n                        onFiltersChange ? (\r\n                          <Button\r\n                            size=\"sm\"\r\n                            variant=\"outlined\"\r\n                            color=\"primary\"\r\n                            onClick={() => onFiltersChange({})}\r\n                          >\r\n                            Clear filters\r\n                          </Button>\r\n                        ) : undefined\r\n                      }\r\n                      size=\"sm\"\r\n                    />\r\n                  ) : (\r\n                    <EmptyState\r\n                      icon={<FolderOpen />}\r\n                      title={emptyMessage}\r\n                      description=\"There are no records to display.\"\r\n                      size=\"sm\"\r\n                    />\r\n                  )}\r\n                </td>\r\n              </tr>\r\n            )}\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n\r\n      {/* ── Footer / Pagination ───────────────────────────────────────────── */}\r\n      {showFooter && (\r\n        <div className=\"eidos-table-footer\">\r\n          <div className=\"eidos-table-footer-content\">\r\n            {showPagination && data.length > 0 ? (\r\n              <Pagination\r\n                page={currentPage}\r\n                totalPages={totalPages}\r\n                onChange={handlePageChange}\r\n                totalItems={totalItems ?? data.length}\r\n                pageSize={currentPageSize}\r\n                onPageSizeChange={handlePageSizeChange}\r\n                pageSizeOptions={pageSizeOptions}\r\n                size=\"sm\"\r\n              />\r\n            ) : (\r\n              <span className=\"eidos-table-results-info\">\r\n                Showing {data.length} of {totalItems ?? data.length} results\r\n              </span>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n\r\n  // ── Wrap with DnD context when draggableColumns=true ─────────────────────\r\n  if (draggableColumns) {\r\n    return (\r\n      <DndContext sensors={sensors} onDragEnd={handleDragEnd}>\r\n        <SortableContext items={sortableItems} strategy={horizontalListSortingStrategy}>\r\n          {tableContent}\r\n        </SortableContext>\r\n      </DndContext>\r\n    );\r\n  }\r\n\r\n  return tableContent;\r\n};\r\n"]}

package/dist/chunk-LQ3C3OR2.js

@@ -0,0 +1,21 @@
+// src/components/Divider/Divider.component.tsx
+import { jsx } from "react/jsx-runtime";
+var Divider = ({
+  direction = "horizontal",
+  className = "",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      ...rest,
+      className: ["eidos-divider", `eidos-divider--${direction}`, className].filter(Boolean).join(" ")
+    }
+  );
+};
+
+export {
+  Divider
+};
+//# sourceMappingURL=chunk-LQ3C3OR2.js.map

package/dist/chunk-LQ3C3OR2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/Divider.component.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { DividerProps } from './Divider.types';\r\n\r\nexport const Divider: React.FC<DividerProps> = ({\r\n  direction = 'horizontal',\r\n  className = '',\r\n  ...rest\r\n}) => {\r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      {...rest}\r\n      className={['eidos-divider', `eidos-divider--${direction}`, className]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n    />\r\n  );\r\n};\r\n"],"mappings":";AASI;AANG,IAAM,UAAkC,CAAC;AAAA,EAC9C,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAW,CAAC,iBAAiB,kBAAkB,SAAS,IAAI,SAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;AAAA;AAAA,EACb;AAEJ;","names":[]}

package/dist/chunk-LTOHGCU4.cjs

@@ -0,0 +1,69 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+
+var _chunkR5QPUQSIcjs = require('./chunk-R5QPUQSI.cjs');
+
+// src/components/Button/Button.component.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var Button = ({
+  variant = "filled",
+  color = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  loadingText = "Loading...",
+  tooltip,
+  className = "",
+  preIcon,
+  posIcon,
+  icon,
+  children,
+  ...buttonProps
+}) => {
+  const isIconOnly = !!icon;
+  if (isIconOnly) {
+    if (children) {
+      throw new Error("Icon-only buttons cannot have children");
+    }
+    if (preIcon) {
+      throw new Error("Icon-only buttons cannot have preIcon");
+    }
+    if (posIcon) {
+      throw new Error("Icon-only buttons cannot have posIcon");
+    }
+  }
+  const buttonClasses = [
+    "eidos-button",
+    `eidos-button--${variant}`,
+    `eidos-button--${color}`,
+    `eidos-button--${size}`,
+    isIconOnly && "eidos-button--icon-only",
+    disabled && "eidos-button--disabled",
+    loading && "eidos-button--loading",
+    className
+  ].filter(Boolean).join(" ");
+  const buttonContent = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", ...buttonProps, className: buttonClasses, disabled: disabled || loading, children: loading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !isIconOnly && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--loading-spinner", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { className: "eidos-button--spinner-icon" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--copy", children: loadingText })
+    ] }),
+    isIconOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--loading-spinner", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { className: "eidos-button--spinner-icon" }) })
+  ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    preIcon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, preIcon, "eidos-button--pre-icon"),
+    isIconOnly && icon ? _chunkTBMVUI7Scjs.renderIcon.call(void 0, icon, "eidos-button--icon") : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--copy", children }),
+    posIcon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, posIcon, "eidos-button--pos-icon")
+  ] }) });
+  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5QPUQSIcjs.Tooltip, { message: tooltip, children: buttonContent }) : buttonContent;
+};
+var IconButton = (props) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { ...props });
+};
+
+
+
+
+exports.Button = Button; exports.IconButton = IconButton;
+//# sourceMappingURL=chunk-LTOHGCU4.cjs.map

package/dist/chunk-LTOHGCU4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-LTOHGCU4.cjs","../src/components/Button/Button.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACNA,2CAA6B;AAoDjB,+CAAA;AA/CL,IAAM,OAAA,EAAgC,CAAC;AAAA,EAC5C,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,KAAA;AAAA,EACV,YAAA,EAAc,YAAA;AAAA,EACd,OAAA;AAAA,EACA,UAAA,EAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,WAAA,EAAa,CAAC,CAAC,IAAA;AAErB,EAAA,GAAA,CAAI,UAAA,EAAY;AACd,IAAA,GAAA,CAAI,QAAA,EAAU;AACZ,MAAA,MAAM,IAAI,KAAA,CAAM,wCAAwC,CAAA;AAAA,IAC1D;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AAAA,EACF;AAEA,EAAA,MAAM,cAAA,EAAgB;AAAA,IACpB,cAAA;AAAA,IACA,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAA;AACF,IAAA;AACD,IAAA;AACP,IAAA;AACF,IAAA;AACD,IAAA;AACX,IAAA;AAGS,EAAA;AAGT,EAAA;AAIQ,IAAA;AACG,sBAAA;AAGA,sBAAA;AACH,IAAA;AAGA,IAAA;AAMJ,EAAA;AACyB,IAAA;AAGrB,IAAA;AAKqB,IAAA;AAG7B,EAAA;AAGe,EAAA;AACnB;AAagE;AACtD,EAAA;AACV;ADnC6B;AACA;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-LTOHGCU4.cjs","sourcesContent":[null,"import React from 'react';\r\nimport { LoaderCircle } from 'lucide-react';\r\nimport { Tooltip } from '../Tooltip';\r\nimport { ButtonProps, IconButtonProps } from './Button.types';\r\nimport { renderIcon } from '../../utils';\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  variant = 'filled',\r\n  color = 'primary',\r\n  size = 'md',\r\n  disabled = false,\r\n  loading = false,\r\n  loadingText = 'Loading...',\r\n  tooltip,\r\n  className = '',\r\n  preIcon,\r\n  posIcon,\r\n  icon,\r\n  children,\r\n  ...buttonProps\r\n}) => {\r\n  const isIconOnly = !!icon;\r\n\r\n  if (isIconOnly) {\r\n    if (children) {\r\n      throw new Error('Icon-only buttons cannot have children');\r\n    }\r\n    if (preIcon) {\r\n      throw new Error('Icon-only buttons cannot have preIcon');\r\n    }\r\n    if (posIcon) {\r\n      throw new Error('Icon-only buttons cannot have posIcon');\r\n    }\r\n  }\r\n\r\n  const buttonClasses = [\r\n    'eidos-button',\r\n    `eidos-button--${variant}`,\r\n    `eidos-button--${color}`,\r\n    `eidos-button--${size}`,\r\n    isIconOnly && 'eidos-button--icon-only',\r\n    disabled && 'eidos-button--disabled',\r\n    loading && 'eidos-button--loading',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const buttonContent = (\r\n    <button type=\"button\" {...buttonProps} className={buttonClasses} disabled={disabled || loading}>\r\n      {loading ? (\r\n        <>\r\n          {!isIconOnly && (\r\n            <>\r\n              <span className=\"eidos-button--loading-spinner\">\r\n                <LoaderCircle className=\"eidos-button--spinner-icon\" />\r\n              </span>\r\n              <span className=\"eidos-button--copy\">{loadingText}</span>\r\n            </>\r\n          )}\r\n          {isIconOnly && (\r\n            <span className=\"eidos-button--loading-spinner\">\r\n              <LoaderCircle className=\"eidos-button--spinner-icon\" />\r\n            </span>\r\n          )}\r\n        </>\r\n      ) : (\r\n        <>\r\n          {preIcon && renderIcon(preIcon, 'eidos-button--pre-icon')}\r\n\r\n          {isIconOnly && icon ? (\r\n            renderIcon(icon, 'eidos-button--icon')\r\n          ) : (\r\n            <span className=\"eidos-button--copy\">{children}</span>\r\n          )}\r\n\r\n          {posIcon && renderIcon(posIcon, 'eidos-button--pos-icon')}\r\n        </>\r\n      )}\r\n    </button>\r\n  );\r\n\r\n  return tooltip ? <Tooltip message={tooltip}>{buttonContent}</Tooltip> : buttonContent;\r\n};\r\n\r\n/**\r\n * IconButton - Convenience wrapper for icon-only buttons\r\n *\r\n * @example\r\n * ```tsx\r\n * import { IconButton } from 'eidos-ui';\r\n * import { Plus } from 'lucide-react';\r\n *\r\n * <IconButton icon={Plus} tooltip=\"Add item\" />\r\n * ```\r\n */\r\nexport const IconButton: React.FC<IconButtonProps> = (props) => {\r\n  return <Button {...props} />;\r\n};\r\n"]}

package/dist/chunk-M56IGNH7.cjs

@@ -0,0 +1,125 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkCDV2OAS3cjs = require('./chunk-CDV2OAS3.cjs');
+
+// src/components/InlineEdit/InlineEdit.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var InlineEdit = ({
+  value,
+  onChange,
+  onConfirm,
+  onCancel,
+  editing: editingProp,
+  onEditingChange,
+  type = "text",
+  placeholder,
+  trigger = "click",
+  size = "md",
+  fullWidth = false,
+  disabled = false,
+  confirmOnBlur = true,
+  renderDisplay,
+  showEditIcon = true,
+  inputVariant = "outlined",
+  className = ""
+}) => {
+  const isControlled = editingProp !== void 0;
+  const [internalEditing, setInternalEditing] = _react.useState.call(void 0, false);
+  const editing = isControlled ? editingProp : internalEditing;
+  const valueAtEditStart = _react.useRef.call(void 0, value);
+  const [draft, setDraft] = _react.useState.call(void 0, value);
+  const openEdit = _react.useCallback.call(void 0, () => {
+    if (disabled) return;
+    valueAtEditStart.current = value;
+    setDraft(value);
+    if (!isControlled) setInternalEditing(true);
+    _optionalChain([onEditingChange, 'optionalCall', _ => _(true)]);
+  }, [disabled, isControlled, onEditingChange, value]);
+  const closeEdit = _react.useCallback.call(void 0, () => {
+    if (!isControlled) setInternalEditing(false);
+    _optionalChain([onEditingChange, 'optionalCall', _2 => _2(false)]);
+  }, [isControlled, onEditingChange]);
+  const confirm = _react.useCallback.call(void 0, () => {
+    closeEdit();
+    _optionalChain([onConfirm, 'optionalCall', _3 => _3(draft)]);
+  }, [closeEdit, draft, onConfirm]);
+  const cancel = _react.useCallback.call(void 0, () => {
+    setDraft(valueAtEditStart.current);
+    _optionalChain([onChange, 'optionalCall', _4 => _4(valueAtEditStart.current)]);
+    closeEdit();
+    _optionalChain([onCancel, 'optionalCall', _5 => _5()]);
+  }, [closeEdit, onChange, onCancel]);
+  const handleChange = (e) => {
+    setDraft(e.target.value);
+    _optionalChain([onChange, 'optionalCall', _6 => _6(e.target.value)]);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      e.stopPropagation();
+      confirm();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      cancel();
+    }
+  };
+  const handleBlur = () => {
+    if (confirmOnBlur) confirm();
+  };
+  const displayTriggerProps = trigger === "doubleClick" ? { onDoubleClick: openEdit } : { onClick: openEdit };
+  if (editing) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkCDV2OAS3cjs.Input,
+      {
+        type,
+        variant: inputVariant,
+        size,
+        value: draft,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        placeholder,
+        fullWidth,
+        clearable: false,
+        autoFocus: true,
+        className: `eidos-inline-edit eidos-inline-edit--editing ${className}`
+      }
+    );
+  }
+  const isEmpty = !value;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "span",
+    {
+      role: "button",
+      tabIndex: disabled ? void 0 : 0,
+      "aria-label": disabled ? void 0 : "Click to edit",
+      className: [
+        "eidos-inline-edit",
+        `eidos-inline-edit--${size}`,
+        fullWidth ? "eidos-inline-edit--full-width" : "",
+        disabled ? "eidos-inline-edit--disabled" : "",
+        isEmpty ? "eidos-inline-edit--empty" : "",
+        className
+      ].filter(Boolean).join(" "),
+      ...disabled ? {} : displayTriggerProps,
+      onKeyDown: disabled ? void 0 : (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          openEdit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-inline-edit__text", children: renderDisplay ? renderDisplay(value) : value || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-inline-edit__placeholder", children: placeholder }) }),
+        !disabled && showEditIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-inline-edit__icon", "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Pencil, {}) })
+      ]
+    }
+  );
+};
+
+
+
+exports.InlineEdit = InlineEdit;
+//# sourceMappingURL=chunk-M56IGNH7.cjs.map

package/dist/chunk-M56IGNH7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-M56IGNH7.cjs","../src/components/InlineEdit/InlineEdit.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACJA,8BAAqD;AACrD,2CAAuB;AA2GjB,+CAAA;AAtGC,IAAM,WAAA,EAAwC,CAAC;AAAA,EACpD,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,eAAA;AAAA,EACA,KAAA,EAAO,MAAA;AAAA,EACP,WAAA;AAAA,EACA,QAAA,EAAU,OAAA;AAAA,EACV,KAAA,EAAO,IAAA;AAAA,EACP,UAAA,EAAY,KAAA;AAAA,EACZ,SAAA,EAAW,KAAA;AAAA,EACX,cAAA,EAAgB,IAAA;AAAA,EAChB,aAAA;AAAA,EACA,aAAA,EAAe,IAAA;AAAA,EACf,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,aAAA,EAAe,YAAA,IAAgB,KAAA,CAAA;AACrC,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,EAAA,EAAI,6BAAA,KAAc,CAAA;AAC5D,EAAA,MAAM,QAAA,EAAU,aAAA,EAAe,YAAA,EAAc,eAAA;AAG7C,EAAA,MAAM,iBAAA,EAAmB,2BAAA,KAAY,CAAA;AAIrC,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,EAAA,EAAI,6BAAA,KAAc,CAAA;AAMxC,EAAA,MAAM,SAAA,EAAW,gCAAA,CAAY,EAAA,GAAM;AACjC,IAAA,GAAA,CAAI,QAAA,EAAU,MAAA;AACd,IAAA,gBAAA,CAAiB,QAAA,EAAU,KAAA;AAC3B,IAAA,QAAA,CAAS,KAAK,CAAA;AACd,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,kBAAA,CAAmB,IAAI,CAAA;AAC1C,oBAAA,eAAA,wBAAA,CAAkB,IAAI,GAAA;AAAA,EACxB,CAAA,EAAG,CAAC,QAAA,EAAU,YAAA,EAAc,eAAA,EAAiB,KAAK,CAAC,CAAA;AAEnD,EAAA,MAAM,UAAA,EAAY,gCAAA,CAAY,EAAA,GAAM;AAClC,IAAA,GAAA,CAAI,CAAC,YAAA,EAAc,kBAAA,CAAmB,KAAK,CAAA;AAC3C,oBAAA,eAAA,0BAAA,CAAkB,KAAK,GAAA;AAAA,EACzB,CAAA,EAAG,CAAC,YAAA,EAAc,eAAe,CAAC,CAAA;AAElC,EAAA,MAAM,QAAA,EAAU,gCAAA,CAAY,EAAA,GAAM;AAChC,IAAA,SAAA,CAAU,CAAA;AACV,oBAAA,SAAA,0BAAA,CAAY,KAAK,GAAA;AAAA,EACnB,CAAA,EAAG,CAAC,SAAA,EAAW,KAAA,EAAO,SAAS,CAAC,CAAA;AAEhC,EAAA,MAAM,OAAA,EAAS,gCAAA,CAAY,EAAA,GAAM;AAG/B,IAAA,QAAA,CAAS,gBAAA,CAAiB,OAAO,CAAA;AACjC,oBAAA,QAAA,0BAAA,CAAW,gBAAA,CAAiB,OAAO,GAAA;AACnC,IAAA,SAAA,CAAU,CAAA;AACV,oBAAA,QAAA,0BAAA,CAAW,GAAA;AAAA,EACb,CAAA,EAAG,CAAC,SAAA,EAAW,QAAA,EAAU,QAAQ,CAAC,CAAA;AAMlC,EAAA,MAAM,aAAA,EAAe,CAAC,CAAA,EAAA,GAA2C;AAC/D,IAAA,QAAA,CAAS,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AACvB,oBAAA,QAAA,0BAAA,CAAW,CAAA,CAAE,MAAA,CAAO,KAAK,GAAA;AAAA,EAC3B,CAAA;AAEA,EAAA,MAAM,cAAA,EAAgB,CAAC,CAAA,EAAA,GAA6C;AAClE,IAAA,GAAA,CAAI,CAAA,CAAE,IAAA,IAAQ,OAAA,EAAS;AACrB,MAAA,CAAA,CAAE,cAAA,CAAe,CAAA;AAEjB,MAAA,CAAA,CAAE,eAAA,CAAgB,CAAA;AAClB,MAAA,OAAA,CAAQ,CAAA;AAAA,IACV,EAAA,KAAA,GAAA,CAAW,CAAA,CAAE,IAAA,IAAQ,QAAA,EAAU;AAC7B,MAAA,CAAA,CAAE,cAAA,CAAe,CAAA;AACjB,MAAA,CAAA,CAAE,eAAA,CAAgB,CAAA;AAClB,MAAA,MAAA,CAAO,CAAA;AAAA,IACT;AAAA,EAGF,CAAA;AAEA,EAAA,MAAM,WAAA,EAAa,CAAA,EAAA,GAAM;AACvB,IAAA,GAAA,CAAI,aAAA,EAAe,OAAA,CAAQ,CAAA;AAAA,EAC7B,CAAA;AAMA,EAAA,MAAM,oBAAA,EACJ,QAAA,IAAY,cAAA,EAAgB,EAAE,aAAA,EAAe,SAAS,EAAA,EAAI,EAAE,OAAA,EAAS,SAAS,CAAA;AAMhF,EAAA,GAAA,CAAI,OAAA,EAAS;AACX,IAAA,uBACE,6BAAA;AAAA,MAAC,uBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,OAAA,EAAS,YAAA;AAAA,QACT,IAAA;AAAA,QACA,KAAA,EAAO,KAAA;AAAA,QACP,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAA;AAAA,QACX,MAAA,EAAQ,UAAA;AAAA,QACR,WAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA,EAAW,KAAA;AAAA,QACX,SAAA,EAAS,IAAA;AAAA,QACT,SAAA,EAAW,CAAA,6CAAA,EAAgD,SAAS,CAAA;AAAA,MAAA;AAAA,IAAA;AACtE,EAAA;AAQJ,EAAA;AAEA,EAAA;AACE,IAAA;AAAC,IAAA;AAAA,MAAA;AACM,MAAA;AAC4B,MAAA;AACE,MAAA;AACxB,QAAA;AACT,QAAA;AAC0B,QAAA;AACoB,QAAA;AACH,QAAA;AACJ,QAAA;AACvC,MAAA;AAGS,MAAA;AACU,MAAA;AAKb,QAAA;AACE,UAAA;AACA,UAAA;AAAS,QAAA;AACX,MAAA;AACF,MAAA;AAGN,wBAAA;AAIA,QAAA;AAIE,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;ADlDA;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-M56IGNH7.cjs","sourcesContent":[null,"import React, { useState, useRef, useCallback } from 'react';\r\nimport { Pencil } from 'lucide-react';\r\nimport { Input } from '../Input/Input.component';\r\nimport type { InlineEditProps } from './InlineEdit.types';\r\nimport './InlineEdit.scss';\r\n\r\nexport const InlineEdit: React.FC<InlineEditProps> = ({\r\n  value,\r\n  onChange,\r\n  onConfirm,\r\n  onCancel,\r\n  editing: editingProp,\r\n  onEditingChange,\r\n  type = 'text',\r\n  placeholder,\r\n  trigger = 'click',\r\n  size = 'md',\r\n  fullWidth = false,\r\n  disabled = false,\r\n  confirmOnBlur = true,\r\n  renderDisplay,\r\n  showEditIcon = true,\r\n  inputVariant = 'outlined',\r\n  className = '',\r\n}) => {\r\n  const isControlled = editingProp !== undefined;\r\n  const [internalEditing, setInternalEditing] = useState(false);\r\n  const editing = isControlled ? editingProp : internalEditing;\r\n\r\n  // Track the value at the moment editing begins so Esc can revert to it.\r\n  const valueAtEditStart = useRef(value);\r\n\r\n  // Local draft while editing - keeps Input value in sync without forcing the\r\n  // parent to wire `onChange` just to see live keystrokes.\r\n  const [draft, setDraft] = useState(value);\r\n\r\n  // ------------------------------------------------------------------\r\n  // Editing state helpers\r\n  // ------------------------------------------------------------------\r\n\r\n  const openEdit = useCallback(() => {\r\n    if (disabled) return;\r\n    valueAtEditStart.current = value;\r\n    setDraft(value);\r\n    if (!isControlled) setInternalEditing(true);\r\n    onEditingChange?.(true);\r\n  }, [disabled, isControlled, onEditingChange, value]);\r\n\r\n  const closeEdit = useCallback(() => {\r\n    if (!isControlled) setInternalEditing(false);\r\n    onEditingChange?.(false);\r\n  }, [isControlled, onEditingChange]);\r\n\r\n  const confirm = useCallback(() => {\r\n    closeEdit();\r\n    onConfirm?.(draft);\r\n  }, [closeEdit, draft, onConfirm]);\r\n\r\n  const cancel = useCallback(() => {\r\n    // Revert the draft AND propagate the original value so the parent stays in\r\n    // sync when `onChange` is used to maintain external state.\r\n    setDraft(valueAtEditStart.current);\r\n    onChange?.(valueAtEditStart.current);\r\n    closeEdit();\r\n    onCancel?.();\r\n  }, [closeEdit, onChange, onCancel]);\r\n\r\n  // ------------------------------------------------------------------\r\n  // Input handlers\r\n  // ------------------------------------------------------------------\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    setDraft(e.target.value);\r\n    onChange?.(e.target.value);\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      // Stop propagation so parent grids/tables don't double-handle Enter.\r\n      e.stopPropagation();\r\n      confirm();\r\n    } else if (e.key === 'Escape') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      cancel();\r\n    }\r\n    // Tab and Arrow keys intentionally bubble - consumers like DataGrid own\r\n    // Tab-to-next-cell and arrow-key navigation at the container level.\r\n  };\r\n\r\n  const handleBlur = () => {\r\n    if (confirmOnBlur) confirm();\r\n  };\r\n\r\n  // ------------------------------------------------------------------\r\n  // Trigger props for display mode\r\n  // ------------------------------------------------------------------\r\n\r\n  const displayTriggerProps =\r\n    trigger === 'doubleClick' ? { onDoubleClick: openEdit } : { onClick: openEdit };\r\n\r\n  // ------------------------------------------------------------------\r\n  // Render: edit mode\r\n  // ------------------------------------------------------------------\r\n\r\n  if (editing) {\r\n    return (\r\n      <Input\r\n        type={type}\r\n        variant={inputVariant}\r\n        size={size}\r\n        value={draft}\r\n        onChange={handleChange}\r\n        onKeyDown={handleKeyDown}\r\n        onBlur={handleBlur}\r\n        placeholder={placeholder}\r\n        fullWidth={fullWidth}\r\n        clearable={false}\r\n        autoFocus\r\n        className={`eidos-inline-edit eidos-inline-edit--editing ${className}`}\r\n      />\r\n    );\r\n  }\r\n\r\n  // ------------------------------------------------------------------\r\n  // Render: display mode\r\n  // ------------------------------------------------------------------\r\n\r\n  const isEmpty = !value;\r\n\r\n  return (\r\n    <span\r\n      role=\"button\"\r\n      tabIndex={disabled ? undefined : 0}\r\n      aria-label={disabled ? undefined : 'Click to edit'}\r\n      className={[\r\n        'eidos-inline-edit',\r\n        `eidos-inline-edit--${size}`,\r\n        fullWidth ? 'eidos-inline-edit--full-width' : '',\r\n        disabled ? 'eidos-inline-edit--disabled' : '',\r\n        isEmpty ? 'eidos-inline-edit--empty' : '',\r\n        className,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(' ')}\r\n      {...(disabled ? {} : displayTriggerProps)}\r\n      onKeyDown={\r\n        disabled\r\n          ? undefined\r\n          : (e) => {\r\n              if (e.key === 'Enter' || e.key === ' ') {\r\n                e.preventDefault();\r\n                openEdit();\r\n              }\r\n            }\r\n      }\r\n    >\r\n      <span className=\"eidos-inline-edit__text\">\r\n        {renderDisplay\r\n          ? renderDisplay(value)\r\n          : value || <span className=\"eidos-inline-edit__placeholder\">{placeholder}</span>}\r\n      </span>\r\n      {!disabled && showEditIcon && (\r\n        <span className=\"eidos-inline-edit__icon\" aria-hidden>\r\n          <Pencil />\r\n        </span>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n"]}

package/dist/chunk-MOX6LYGC.js

@@ -0,0 +1,125 @@
+import {
+  Avatar
+} from "./chunk-TCX3QKF3.js";
+import {
+  IconButton
+} from "./chunk-FO5FNTJX.js";
+import {
+  renderIcon
+} from "./chunk-XSGUFMT4.js";
+import {
+  Tooltip
+} from "./chunk-H523JFY2.js";
+
+// src/components/Navigation/Navigation.component.tsx
+import { useCallback, useEffect, useState } from "react";
+import { SquareChevronLeft, SquareChevronRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NavigationBrandLogo = ({ logo }) => /* @__PURE__ */ jsx("img", { src: logo.src, alt: logo.alt, className: "eidos-navigation__brand-logo" });
+var Navigation = ({
+  brand,
+  items,
+  footer,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  collapseBelow,
+  collapsible = true,
+  className = ""
+}) => {
+  const isControlled = collapsedProp !== void 0;
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+  const collapsed = isControlled ? collapsedProp : internalCollapsed;
+  const applyCollapsed = useCallback(
+    (next) => {
+      if (!isControlled) setInternalCollapsed(next);
+      onCollapsedChange?.(next);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const toggleCollapsed = useCallback(() => {
+    applyCollapsed(!collapsed);
+  }, [applyCollapsed, collapsed]);
+  useEffect(() => {
+    if (collapseBelow === void 0) return;
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const query = window.matchMedia(`(max-width: ${collapseBelow}px)`);
+    applyCollapsed(query.matches);
+    const handleChange = (e) => applyCollapsed(e.matches);
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, [collapseBelow, applyCollapsed]);
+  const classes = ["eidos-navigation", collapsed && "eidos-navigation--collapsed", className].filter(Boolean).join(" ");
+  const brandClasses = [
+    "eidos-navigation__brand",
+    brand.logo && "eidos-navigation__brand--logo-only",
+    brand.onClick && "eidos-navigation__brand--clickable"
+  ].filter(Boolean).join(" ");
+  const brandAccessibleName = brand.logo ? brand.logo.alt : brand.name;
+  return /* @__PURE__ */ jsxs("nav", { className: classes, "aria-label": "Main", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: brandClasses,
+        onClick: brand.onClick,
+        role: brand.onClick ? "button" : void 0,
+        tabIndex: brand.onClick ? 0 : void 0,
+        "aria-label": brand.onClick ? brandAccessibleName : void 0,
+        onKeyDown: brand.onClick ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            brand.onClick?.();
+          }
+        } : void 0,
+        children: brand.logo ? /* @__PURE__ */ jsx(NavigationBrandLogo, { logo: brand.logo }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Avatar, { name: brand.name, shape: "square", size: "sm" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "eidos-navigation__brand-name",
+              "aria-hidden": brand.onClick ? true : void 0,
+              children: brand.name
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "eidos-navigation__items", children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "eidos-navigation__item-wrapper", children: /* @__PURE__ */ jsx(Tooltip, { message: item.label, placement: "right", disabled: !collapsed, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: [
+          "eidos-navigation__item",
+          item.active && "eidos-navigation__item--active"
+        ].filter(Boolean).join(" "),
+        disabled: item.disabled,
+        onClick: item.onClick,
+        "aria-current": item.active ? "page" : void 0,
+        "aria-label": collapsed ? item.label : void 0,
+        children: [
+          item.icon && renderIcon(item.icon, "eidos-navigation__item-icon"),
+          /* @__PURE__ */ jsx("span", { className: "eidos-navigation__item-label", "aria-hidden": collapsed || void 0, children: item.label })
+        ]
+      }
+    ) }) }, item.id)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "eidos-navigation__footer", children: footer }),
+    collapsible && /* @__PURE__ */ jsx("span", { className: "eidos-navigation__toggle", children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: collapsed ? SquareChevronRight : SquareChevronLeft,
+        variant: "text",
+        color: "secondary",
+        size: "sm",
+        tooltip: collapsed ? "Expand navigation" : "Collapse navigation",
+        "aria-label": collapsed ? "Expand navigation" : "Collapse navigation",
+        onClick: toggleCollapsed
+      }
+    ) })
+  ] });
+};
+Navigation.displayName = "Navigation";
+
+export {
+  Navigation
+};
+//# sourceMappingURL=chunk-MOX6LYGC.js.map

package/dist/chunk-MOX6LYGC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Navigation/Navigation.component.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\r\nimport { SquareChevronLeft, SquareChevronRight } from 'lucide-react';\r\nimport type { NavigationLogo, NavigationProps } from './Navigation.types';\r\nimport { Avatar } from '../Avatar';\r\nimport { IconButton } from '../Button';\r\nimport { Tooltip } from '../Tooltip';\r\nimport { renderIcon } from '../../utils';\r\nimport './Navigation.scss';\r\n\r\n/**\r\n * Renders a custom brand logo, guaranteeing correct aspect-ratio rendering\r\n * regardless of whether the source image is vertical, horizontal, or square\r\n * - and regardless of how much width is actually available, expanded or\r\n * collapsed. Deliberately no JS sizing/measurement at all: a fixed `height`,\r\n * `width: auto` (derived from the image's own intrinsic ratio), a `max-width`\r\n * expressed as `min(72px, 100%)` (see `.eidos-navigation__brand-logo` in\r\n * Navigation.scss) so it never renders wider than whatever space its\r\n * container - the rail, expanded or collapsed - actually has, and\r\n * `object-fit: contain` so it's letterboxed rather than distorted if that\r\n * ever clamps it below its natural width-at-32px-tall. Centering is handled\r\n * separately, at the row level - see `&__brand--logo-only` in Navigation.scss.\r\n */\r\nconst NavigationBrandLogo: React.FC<{ logo: NavigationLogo }> = ({ logo }) => (\r\n  <img src={logo.src} alt={logo.alt} className=\"eidos-navigation__brand-logo\" />\r\n);\r\n\r\nexport const Navigation: React.FC<NavigationProps> = ({\r\n  brand,\r\n  items,\r\n  footer,\r\n  collapsed: collapsedProp,\r\n  defaultCollapsed = false,\r\n  onCollapsedChange,\r\n  collapseBelow,\r\n  collapsible = true,\r\n  className = '',\r\n}) => {\r\n  // ── Controlled / uncontrolled collapsed state ─────────────────────────────\r\n  // Mirrors CommandPalette's `open`/`defaultOpen` pattern - omitting\r\n  // `collapsed` lets Navigation own its state entirely, while passing it\r\n  // (+ `onCollapsedChange`) keeps full external control for consumers who\r\n  // need to persist the preference or drive it from a responsive breakpoint.\r\n  const isControlled = collapsedProp !== undefined;\r\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\r\n  const collapsed = isControlled ? collapsedProp : internalCollapsed;\r\n\r\n  // Shared by the manual toggle button and `collapseBelow` below - uncontrolled\r\n  // flips the internal state directly, controlled defers to `onCollapsedChange`\r\n  // since Navigation can't change `collapsed` itself.\r\n  const applyCollapsed = useCallback(\r\n    (next: boolean) => {\r\n      if (!isControlled) setInternalCollapsed(next);\r\n      onCollapsedChange?.(next);\r\n    },\r\n    [isControlled, onCollapsedChange],\r\n  );\r\n\r\n  const toggleCollapsed = useCallback(() => {\r\n    applyCollapsed(!collapsed);\r\n  }, [applyCollapsed, collapsed]);\r\n\r\n  // Auto-collapse/expand at a viewport breakpoint. `matchMedia`'s `change`\r\n  // event only fires exactly at the crossing point, not on every resize\r\n  // tick, so a manual toggle in between crossings is left alone until the\r\n  // viewport actually crosses the breakpoint again.\r\n  useEffect(() => {\r\n    if (collapseBelow === undefined) return;\r\n    if (typeof window === 'undefined' || !window.matchMedia) return;\r\n\r\n    const query = window.matchMedia(`(max-width: ${collapseBelow}px)`);\r\n\r\n    applyCollapsed(query.matches);\r\n\r\n    const handleChange = (e: MediaQueryListEvent) => applyCollapsed(e.matches);\r\n    query.addEventListener('change', handleChange);\r\n    return () => query.removeEventListener('change', handleChange);\r\n  }, [collapseBelow, applyCollapsed]);\r\n\r\n  const classes = ['eidos-navigation', collapsed && 'eidos-navigation--collapsed', className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // A `logo` brand has no `name` text alongside it (see the discriminated\r\n  // union in Navigation.types.ts), so there's never a second, variable-width\r\n  // sibling competing for space - unlike the `name` variant, it's always\r\n  // safe to just center it outright, in both expanded and collapsed states,\r\n  // with nothing further to compute. See `&__brand--logo-only` in\r\n  // Navigation.scss.\r\n  const brandClasses = [\r\n    'eidos-navigation__brand',\r\n    brand.logo && 'eidos-navigation__brand--logo-only',\r\n    brand.onClick && 'eidos-navigation__brand--clickable',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const brandAccessibleName = brand.logo ? brand.logo.alt : brand.name;\r\n\r\n  return (\r\n    <nav className={classes} aria-label=\"Main\">\r\n      <div\r\n        className={brandClasses}\r\n        onClick={brand.onClick}\r\n        role={brand.onClick ? 'button' : undefined}\r\n        tabIndex={brand.onClick ? 0 : undefined}\r\n        // Only a real interactive control (role=\"button\") reliably exposes\r\n        // `aria-label` as its accessible name - a plain, non-interactive div\r\n        // doesn't, so the visible (if currently faded) text remains the only\r\n        // way assistive tech gets the brand name in that case.\r\n        aria-label={brand.onClick ? brandAccessibleName : undefined}\r\n        onKeyDown={\r\n          brand.onClick\r\n            ? (e) => {\r\n                if (e.key === 'Enter' || e.key === ' ') {\r\n                  e.preventDefault();\r\n                  brand.onClick?.();\r\n                }\r\n              }\r\n            : undefined\r\n        }\r\n      >\r\n        {brand.logo ? (\r\n          <NavigationBrandLogo logo={brand.logo} />\r\n        ) : (\r\n          <>\r\n            <Avatar name={brand.name} shape=\"square\" size=\"sm\" />\r\n            {/* Only redundant with the wrapper's own `aria-label` when\r\n                `brand.onClick` is set (see the note on it above) - otherwise\r\n                this is the only accessible text for the brand at all. */}\r\n            <span\r\n              className=\"eidos-navigation__brand-name\"\r\n              aria-hidden={brand.onClick ? true : undefined}\r\n            >\r\n              {brand.name}\r\n            </span>\r\n          </>\r\n        )}\r\n      </div>\r\n\r\n      <ul className=\"eidos-navigation__items\">\r\n        {items.map((item) => (\r\n          <li key={item.id} className=\"eidos-navigation__item-wrapper\">\r\n            {/* Always wrapped (disabled rather than omitted while expanded)\r\n                so the button underneath is never unmounted/remounted across\r\n                a collapse toggle - that would otherwise reset its own CSS\r\n                transitions (gap, padding, justify-content) partway through\r\n                the rail's width animation, snapping instead of easing. */}\r\n            <Tooltip message={item.label} placement=\"right\" disabled={!collapsed}>\r\n              <button\r\n                type=\"button\"\r\n                className={[\r\n                  'eidos-navigation__item',\r\n                  item.active && 'eidos-navigation__item--active',\r\n                ]\r\n                  .filter(Boolean)\r\n                  .join(' ')}\r\n                disabled={item.disabled}\r\n                onClick={item.onClick}\r\n                aria-current={item.active ? 'page' : undefined}\r\n                // The label fades out visually while collapsed (see\r\n                // `.eidos-navigation__item-label` in Navigation.scss) but\r\n                // isn't removed from the DOM, so it's given directly as the\r\n                // accessible name here instead of relying on the (also\r\n                // fading) visible text, and hidden from assistive tech below\r\n                // to avoid it being announced twice alongside the `Tooltip`.\r\n                aria-label={collapsed ? item.label : undefined}\r\n              >\r\n                {item.icon && renderIcon(item.icon, 'eidos-navigation__item-icon')}\r\n                <span className=\"eidos-navigation__item-label\" aria-hidden={collapsed || undefined}>\r\n                  {item.label}\r\n                </span>\r\n              </button>\r\n            </Tooltip>\r\n          </li>\r\n        ))}\r\n      </ul>\r\n\r\n      {footer && <div className=\"eidos-navigation__footer\">{footer}</div>}\r\n\r\n      {/* Floats half in/half out of the rail's right edge (see `&__toggle`\r\n          in Navigation.scss) rather than sitting in its own row - a\r\n          dedicated row reserved space in the flex column even when there\r\n          were too few items to need it.\r\n\r\n          The positioning has to live on this wrapping `<span>`, not on the\r\n          `IconButton` itself: its `tooltip` prop makes `Button` wrap it in\r\n          `Tooltip`'s own `.eidos-tooltip-trigger` div, which - not the\r\n          button - is the actual flex child of `.eidos-navigation`. Removing\r\n          only the inner button from flow left that outer wrapper still\r\n          in-flow, still consuming space and still getting `gap` applied\r\n          around it, which is exactly why a gap remained. */}\r\n      {collapsible && (\r\n        <span className=\"eidos-navigation__toggle\">\r\n          <IconButton\r\n            icon={collapsed ? SquareChevronRight : SquareChevronLeft}\r\n            variant=\"text\"\r\n            color=\"secondary\"\r\n            size=\"sm\"\r\n            tooltip={collapsed ? 'Expand navigation' : 'Collapse navigation'}\r\n            aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\r\n            onClick={toggleCollapsed}\r\n          />\r\n        </span>\r\n      )}\r\n    </nav>\r\n  );\r\n};\r\n\r\nNavigation.displayName = 'Navigation';\r\n"],"mappings":"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","names":[]}