@kanda-libs/ks-design-library-new 0.0.1 → 0.0.3

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export interface TableProps<T extends StringIndexedObject<unknown>> {
 	pageSize?: number;
 	compact?: boolean;
 	isLoading?: boolean;
+	query?: string;
 }
 export declare function Table<T extends StringIndexedObject<unknown>>({ compact, isLoading, ...props }: PropsWithChildren<TableProps<T>>): JSX.Element;
 

package/dist/index.esm.mjs

@@ -1,2 +1,2 @@
-import{SkeletonLoader as Z}from"@kanda-libs/ks-design-library";import{Icon as Y}from"@kanda-libs/ks-design-library";var v="flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20",R={icon:"chevron-down",stroke:"neutral-500",size:12,className:"ml-2 my-auto"},H={width:"calc(100% + 16px)"},u={container:{base:"w-full h-full overflow-hidden",padding:"pl-4 -ml-4"},flex:{base:"w-full h-full flex",padding:"pl-4"}};import{jsx as q,jsxs as K}from"react/jsx-runtime";var D=function({label:e,...o}){return K("button",{className:v,...o,children:[e,q(Y,{...R})]})},I=D;import L from"clsx";function g(e){let o=e===0?H:{};return{classNames:{container:L(u.container.base,e===0?u.container.padding:""),flex:L(u.flex.base,e===0?"":u.flex.padding)},containerStyle:o}}import{jsx as k}from"react/jsx-runtime";var Q=function({index:e,children:o}){let{classNames:r,containerStyle:t}=g(e);return k("div",{className:r.container,style:t,children:k("div",{className:r.flex,children:o})})},E=Q;var T={Button:I,Wrapper:E};import O from"clsx";var c={main:"flex h-14",loading:{base:"my-auto w-full mr-8",margin:"ml-4"},wrapper:{padding:"px-2 pt-2",popover:"pb-1"}};function S(e,o){return{classNames:{...c,loading:O(c.loading.base,e===0?"":c.loading.margin),wrapper:O(c.wrapper.padding,o?"":c.wrapper.popover)}}}import{jsx as b}from"react/jsx-runtime";var $=function({index:e,isLoading:o=!1,popoverButtons:r=!1,label:t,...a}){let{classNames:n}=S(e,r);return b("div",{...a,className:n.main,children:b(Z,{isLoading:o,wrapperClassName:n.loading,afterLoading:b(T.Wrapper,{index:e,children:b(T.Button,{label:t})})})})},A=$;var M={base:"h-14 border-b border-neutral-200"};function h(e,o){let{headers:r,getHeaderGroupProps:t}=e,a=t({}),n=o.filter(l=>l.isVisible).length;return{headers:r,headerGroupProps:a,totalVisible:n}}import{jsx as _}from"react/jsx-runtime";function ee({headerGroup:e,columns:o,isLoading:r}){let{headerGroupProps:t,headers:a}=h(e,o);return _("div",{...t,className:M.base,children:a.map((n,l)=>_(A,{index:l,label:n.render("Header"),isLoading:r,...n.getHeaderProps(n.getSortByToggleProps())}))})}var F=ee;import{SkeletonLoader as re}from"@kanda-libs/ks-design-library";import oe from"clsx";var i={container:"flex w-full h-full",render:"w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis",renderLoading:"w-full my-auto mr-8 text-style-g",cell:{base:"h-16 flex",compact:"h-8 flex",padding:"pl-4"}};function C(e,o,r){return{cell:oe(o?i.cell.compact:i.cell.base,e===0?"":i.cell.padding),container:i.container,render:r?i.renderLoading:i.render}}import{Fragment as ne,jsx as f}from"react/jsx-runtime";var te=function({render:e,index:o,compact:r=!1,isLoading:t=!1,...a}){let n=C(o,r,t);return f("div",{...a,className:n.cell,children:f("div",{className:n.container,children:f("div",{className:n.render,children:f(re,{isLoading:t,afterLoading:f(ne,{children:e()})})})})})},G=te;import{useClasses as ae}from"@kanda-libs/ks-design-library";var W={base:"relative h-16",compact:"relative h-8",border:"border-b border-neutral-200",hover:"group hover:bg-neutral-50 cursor-pointer",button:"hidden group-hover:block"};function P(e){return ae(W,{base:[".base",e===9?"":".border",".hover"],button:[".button"]})}import{jsx as B}from"react/jsx-runtime";function se({cells:e,index:o,compact:r=!1,isLoading:t=!1,...a}){let n=P(o);return console.log({props:a}),B("div",{...a,className:r?n.compact:n.base,children:e.map((l,p)=>B(G,{...l.getCellProps(),index:p,isLoading:t,render:()=>l.render("Cell")}))})}var j=se;import{useCallback as z,useState as le}from"react";function w(e){let[o,r]=le(""),t=z(n=>{r(n.currentTarget.value)},[r]),a=z(()=>{e(o)},[o,e]);return{search:o,onChange:t,onSubmit:a}}import{jsx as y,jsxs as ie}from"react/jsx-runtime";var pe=function({onSearch:e}){let{search:o,onChange:r,onSubmit:t}=w(e);return ie("div",{className:"flex flex-row gap-x-2",children:[y("span",{children:"Search:"}),y("input",{type:"text",value:o,onChange:r}),y("button",{onClick:t,children:"Search"})]})},V=pe;import{useTable as ue,useGlobalFilter as fe,usePagination as be,useSortBy as xe,useFlexLayout as ge}from"react-table";import ce from"fuse.js";var de=(e,o)=>e.filter(r=>Object.values(r.values).join(", ").toLowerCase().includes(o.toLowerCase())),U=(e,o)=>e.filter(({id:r})=>o.filter(t=>t.id===r).length===0),me=(e,o,r,t,a)=>{let n=e.map(s=>s.values),d=new ce(n,{keys:r.map(s=>({name:s,getFn:m=>m[s]}))}).search(o).map(({item:s})=>s).slice(0,t).map(s=>e.find(m=>m.values.cid===s.cid)).filter(Boolean);return U(d,a)},J=(e,o,r,t=10)=>{if(r.length<1)return e;let a=de(e,r).slice(0,t),n=U(e,a),l=me(n,r,o,t-a.length,a),p=[...a,...l];return e.map(({id:d})=>p.find(s=>s.id===d)).filter(Boolean)};function N({columns:e,data:o,pageSize:r=10}){let t=ue({columns:e,data:o,initialState:{pageSize:10,pageIndex:0},autoResetGlobalFilter:!1,globalFilter:(n,l,p)=>J(n,l,p,r)},fe,xe,be,ge);return{onSearch:n=>{t.setGlobalFilter(n)},...t}}import{Fragment as he,jsx as x,jsxs as X}from"react/jsx-runtime";function Te({compact:e=!1,isLoading:o=!1,...r}){let{onSearch:t,page:a,prepareRow:n,columns:l,getTableProps:p,headerGroups:d}=N(r);return X(he,{children:[x(V,{onSearch:s=>{t(s)}}),X("div",{...p(),className:"w-full",children:[x("div",{children:d.map(s=>x(F,{headerGroup:s,columns:l,isLoading:o}))}),a.map((s,m)=>(n(s),x(j,{...s.getRowProps(),index:m,cells:s.cells,compact:e,isLoading:o})))]})]})}var Se=Te;export{Se as Table};
+import{Pagination as Ce}from"@kanda-libs/ks-design-library";import{SkeletonLoader as Z}from"@kanda-libs/ks-design-library";import{useIsDesktop as X}from"@kanda-libs/ks-design-library";function u(e){if(!e)return{};let o=X();return{...e,width:o?e==null?void 0:e.width:"100%"}}import{Icon as Y}from"@kanda-libs/ks-design-library";var R="flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20",N={icon:"chevron-down",stroke:"neutral-500",size:12,className:"ml-2 my-auto"},H={width:"calc(100% + 16px)"},f={container:{base:"w-full h-full overflow-hidden",padding:"pl-4 -ml-4"},flex:{base:"w-full h-full md:flex px-4 md:px-0",padding:"md:pl-4"}};import{jsx as q,jsxs as K}from"react/jsx-runtime";var $=function({label:e,...o}){return K("button",{className:R,...o,children:[e,q(Y,{...N})]})},v=$;import L from"clsx";function T(e){let o=e===0?H:{};return{classNames:{container:L(f.container.base,e===0?f.container.padding:""),flex:L(f.flex.base,e===0?"":f.flex.padding)},containerStyle:o}}import{jsx as k}from"react/jsx-runtime";var Q=function({index:e,children:o}){let{classNames:t,containerStyle:r}=T(e);return k("div",{className:t.container,style:r,children:k("div",{className:t.flex,children:o})})},I=Q;var P={Button:v,Wrapper:I};import O from"clsx";var m={main:"flex md:h-14",loading:{base:"my-auto w-full mr-8",margin:"ml-4"},wrapper:{padding:"md:px-2 md:pt-2",popover:"pb-1"}};function S(e,o){return{classNames:{...m,loading:O(m.loading.base,e===0?"":m.loading.margin),wrapper:O(m.wrapper.padding,o?"":m.wrapper.popover)}}}import{jsx as g}from"react/jsx-runtime";var ee=function({index:e,isLoading:o=!1,popoverButtons:t=!1,label:r,...n}){let{classNames:a}=S(e,t),{style:s,...p}=n,i=u(s);return g("div",{...p,style:i,className:a.main,children:g(Z,{isLoading:o,wrapperClassName:a.loading,afterLoading:g(P.Wrapper,{index:e,children:g(P.Button,{label:r})})})})},M=ee;var E={base:"flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200"};function C(e,o){let{headers:t,getHeaderGroupProps:r}=e,n=r({}),a=o.filter(s=>s.isVisible).length;return{headers:t,headerGroupProps:n,totalVisible:a}}import{jsx as A}from"react/jsx-runtime";function oe({headerGroup:e,columns:o,isLoading:t}){let{headerGroupProps:r,headers:n}=C(e,o);return A("div",{...r,className:E.base,children:n.map((a,s)=>A(M,{index:s,label:a.render("Header"),isLoading:t,...a.getHeaderProps(a.getSortByToggleProps())}))})}var _=oe;import{SkeletonLoader as re,Text as ne}from"@kanda-libs/ks-design-library";import te from"clsx";var d={container:"flex w-full h-full",render:"w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis",renderLoading:"w-full my-auto mr-8 text-style-g",mobileLabel:"block md:hidden text-16-24-em text-neutral-600 mr-2",cell:{base:"px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex",compact:"h-8 flex",padding:"md:pl-4"}};function y(e,o,t){return{cell:te(o?d.cell.compact:d.cell.base,e===0?"":d.cell.padding),container:d.container,render:t?d.renderLoading:d.render,mobileLabel:d.mobileLabel}}import{Fragment as se,jsx as b,jsxs as le}from"react/jsx-runtime";var ae=function({render:e,index:o,compact:t=!1,isLoading:r=!1,label:n,...a}){let s=y(o,t,r),{style:p,...i}=a,l=u(p);return b("div",{...i,style:l,className:s.cell,children:b("div",{className:s.container,children:b("div",{className:s.render,children:b(re,{isLoading:r,afterLoading:le(se,{children:[b(ne,{text:`${n}:`,className:s.mobileLabel}),e()]})})})})})},W=ae;import{useClasses as pe}from"@kanda-libs/ks-design-library";var F={base:"relative md:h-16 flex-col py-2 md:py-0 md:flex-row",compact:"relative h-8",border:"border-b border-neutral-200",hover:"group hover:bg-neutral-50 cursor-pointer",button:"hidden group-hover:block"};function w(e){return pe(F,{base:[".base",e===9?"":".border",".hover"],button:[".button"]})}import{jsx as G}from"react/jsx-runtime";function ie({cells:e,index:o,compact:t=!1,isLoading:r=!1,...n}){let a=w(o);return G("div",{...n,className:t?a.compact:a.base,children:e.map((s,p)=>G(W,{...s.getCellProps(),index:p,isLoading:r,render:()=>s.render("Cell"),label:s.column.Header}))})}var j=ie;import{Fragment as me,jsx as B}from"react/jsx-runtime";function de({page:e,prepareRow:o,isLoading:t=!1,compact:r=!1}){return B(me,{children:e.map((n,a)=>(o(n),B(j,{...n.getRowProps(),index:a,cells:n.cells,isLoading:t,compact:r})))})}var z=de;import{useTable as be,useGlobalFilter as xe,usePagination as ge,useSortBy as Te,useFlexLayout as Pe}from"react-table";import ce from"fuse.js";var ue=(e,o)=>e.filter(t=>Object.values(t.values).join(", ").toLowerCase().includes(o.toLowerCase())),V=(e,o)=>e.filter(({id:t})=>o.filter(r=>r.id===t).length===0),fe=(e,o,t,r,n)=>{let a=e.map(l=>l.values),i=new ce(a,{keys:t.map(l=>({name:l,getFn:c=>c[l]}))}).search(o).map(({item:l})=>l).slice(0,r).map(l=>e.find(c=>c.values.cid===l.cid)).filter(Boolean);return V(i,n)},D=(e,o,t,r=10)=>{if(t.length<1)return e;let n=ue(e,t).slice(0,r),a=V(e,n),s=fe(a,t,o,r-n.length,n),p=[...n,...s];return e.map(({id:i})=>p.find(l=>l.id===i)).filter(Boolean)};import{useEffect as Se}from"react";function h({columns:e,data:o,pageSize:t=10,query:r=""}){let n=be({columns:e,data:o,initialState:{pageSize:10,pageIndex:0},autoResetGlobalFilter:!1,globalFilter:(l,c,J)=>D(l,c,J,t)},xe,Te,ge,Pe),{gotoPage:a,pageCount:s,state:{pageIndex:p}}=n,i={pageCount:s,pageIndex:p,setPage:l=>{a(l)}};return Se(()=>{n.setGlobalFilter(r)},[r]),{paginationProps:i,...n}}import{Fragment as he,jsx as x,jsxs as U}from"react/jsx-runtime";function ye({compact:e=!1,isLoading:o=!1,...t}){let{page:r,prepareRow:n,columns:a,getTableProps:s,headerGroups:p,paginationProps:i}=h(t);return U(he,{children:[U("div",{...s(),className:"w-full",children:[x("div",{children:p.map(l=>x(_,{headerGroup:l,columns:a,isLoading:o}))}),x(z,{page:r,prepareRow:n,isLoading:o,compact:e})]}),x("div",{className:"px-4 py-2",children:x(Ce,{...i})})]})}var we=ye;export{we as Table};
 //# sourceMappingURL=index.esm.mjs.map

package/dist/index.esm.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/components/Table/components/HeaderColumn/index.tsx", "../src/components/Table/components/HeaderButton/Button.tsx", "../src/components/Table/components/HeaderButton/constants.ts", "../src/components/Table/components/HeaderButton/useWrapperProps.ts", "../src/components/Table/components/HeaderButton/Wrapper.tsx", "../src/components/Table/components/HeaderButton/index.tsx", "../src/components/Table/components/HeaderColumn/useHeaderColumnProps.ts", "../src/components/Table/components/HeaderColumn/constants.ts", "../src/components/Table/components/HeaderGroup/constants.ts", "../src/components/Table/components/HeaderGroup/useHeaderGroupProps.ts", "../src/components/Table/components/HeaderGroup/index.tsx", "../src/components/Table/components/Cell/index.tsx", "../src/components/Table/components/Cell/useCellClassNames.ts", "../src/components/Table/components/Cell/constants.ts", "../src/components/Table/components/Row/useRowClassNames.ts", "../src/components/Table/components/Row/constants.ts", "../src/components/Table/components/Row/index.tsx", "../src/components/Table/components/SearchInput/useSearchInput.ts", "../src/components/Table/components/SearchInput/index.tsx", "../src/components/Table/useTableProps.ts", "../src/components/Table/helpers/search.ts", "../src/components/Table/index.tsx"],
-  "sourcesContent": ["import { SkeletonLoader } from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport type { TableHeaderProps } from 'react-table';\nimport HeaderButton from '../HeaderButton';\nimport useHeaderColumnProps from './useHeaderColumnProps';\n\nexport interface HeaderColumnProps extends TableHeaderProps {\n  index: number;\n  isLoading?: boolean;\n  popoverButtons?: boolean;\n  label: ReactNode;\n}\n\nconst HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({\n  index,\n  isLoading = false,\n  popoverButtons = false,\n  label,\n  ...props\n}) {\n  const { classNames } = useHeaderColumnProps(index, popoverButtons);\n\n  return (\n    <div {...props} className={classNames.main}>\n      <SkeletonLoader\n        isLoading={isLoading}\n        wrapperClassName={classNames.loading}\n        afterLoading={\n          <HeaderButton.Wrapper index={index}>\n            <HeaderButton.Button label={label} />\n          </HeaderButton.Wrapper>\n        }\n      />\n    </div>\n  );\n};\n\nexport default HeaderColumn;\n", "import type { FunctionComponent, HTMLAttributes, ReactNode } from 'react';\nimport { Icon } from '@kanda-libs/ks-design-library';\nimport { BUTTON_CLASS_NAMES, ICON_PROPS } from './constants';\n\nexport interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {\n  label: ReactNode;\n}\n\nconst Button: FunctionComponent<ButtonProps> = function ({ label, ...props }) {\n  return (\n    <button className={BUTTON_CLASS_NAMES} {...props}>\n      {label}\n      <Icon {...ICON_PROPS} />\n    </button>\n  );\n};\n\nexport default Button;\n", "export const BUTTON_CLASS_NAMES =\n  'flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20';\n\nexport const ICON_PROPS = {\n  icon: 'chevron-down',\n  stroke: 'neutral-500',\n  size: 12,\n  className: 'ml-2 my-auto',\n};\n\nexport const WRAPPER_STYLE = {\n  width: 'calc(100% + 16px)',\n};\n\nexport const WRAPPER_CLASS_NAMES = {\n  container: {\n    base: 'w-full h-full overflow-hidden',\n    padding: 'pl-4 -ml-4',\n  },\n  flex: {\n    base: 'w-full h-full flex',\n    padding: 'pl-4',\n  },\n};\n", "import type { CSSProperties } from 'react';\nimport clsx from 'clsx';\nimport { WRAPPER_STYLE, WRAPPER_CLASS_NAMES } from './constants';\n\nexport interface WrapperPropsHook {\n  classNames: {\n    container: string;\n    flex: string;\n  };\n  containerStyle: CSSProperties;\n}\n\nexport default function useWrapperProps(index: number): WrapperPropsHook {\n  const containerStyle = index === 0 ? WRAPPER_STYLE : {};\n\n  const classNames = {\n    container: clsx(\n      WRAPPER_CLASS_NAMES.container.base,\n      index === 0 ? WRAPPER_CLASS_NAMES.container.padding : '',\n    ),\n    flex: clsx(\n      WRAPPER_CLASS_NAMES.flex.base,\n      index === 0 ? '' : WRAPPER_CLASS_NAMES.flex.padding,\n    ),\n  };\n\n  return {\n    classNames,\n    containerStyle,\n  };\n}\n", "import type { FunctionComponent } from 'react';\nimport useWrapperProps from './useWrapperProps';\n\nexport interface WrapperProps {\n  index: number;\n  children?: JSX.Element | JSX.Element[];\n}\n\nconst Wrapper: FunctionComponent<WrapperProps> = function ({\n  index,\n  children,\n}) {\n  const { classNames, containerStyle } = useWrapperProps(index);\n\n  return (\n    <div className={classNames.container} style={containerStyle}>\n      <div className={classNames.flex}>{children}</div>\n    </div>\n  );\n};\n\nexport default Wrapper;\n", "import Button from './Button';\nimport Wrapper from './Wrapper';\n\nexport default {\n  Button,\n  Wrapper,\n};\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport interface HeaderColumnPropsHook {\n  classNames: {\n    main: string;\n    loading: string;\n    wrapper: string;\n  };\n}\n\nexport default function useHeaderColumnProps(\n  index: number,\n  popoverButtons: boolean,\n): HeaderColumnPropsHook {\n  const classNames = {\n    ...CLASS_NAMES,\n    loading: clsx(\n      CLASS_NAMES.loading.base,\n      index === 0 ? '' : CLASS_NAMES.loading.margin,\n    ),\n    wrapper: clsx(\n      CLASS_NAMES.wrapper.padding,\n      popoverButtons ? '' : CLASS_NAMES.wrapper.popover,\n    ),\n  };\n\n  return {\n    classNames,\n  };\n}\n", "export const CLASS_NAMES = {\n  main: 'flex h-14',\n  loading: {\n    base: 'my-auto w-full mr-8',\n    margin: 'ml-4',\n  },\n  wrapper: {\n    padding: 'px-2 pt-2',\n    popover: 'pb-1',\n  },\n};\n\nexport const MOVE_LEFT_ITEM_PROPS = {\n  name: 'Move column left',\n  icon: 'arrow-left',\n};\n\nexport const MOVE_RIGHT_ITEM_PROPS = {\n  name: 'Move column right',\n  icon: 'arrow-right',\n};\n\nexport const HIDE_COLUMN_PROPS = {\n  name: 'Hide column',\n  icon: 'eye-off',\n};\n", "export const CLASS_NAMES = {\n  base: 'h-14 border-b border-neutral-200',\n};\n", "import type {\n  ColumnInstance,\n  HeaderGroup,\n  TableHeaderProps,\n} from 'react-table';\n\nexport interface HeaderGroupPropsHook<T extends Object> {\n  headers: ColumnInstance<T>[];\n  headerGroupProps: TableHeaderProps;\n  totalVisible: number;\n}\n\nexport default function useHeaderGroupProps<T extends Object>(\n  headerGroup: HeaderGroup<T>,\n  columns: ColumnInstance<T>[],\n): HeaderGroupPropsHook<T> {\n  const { headers, getHeaderGroupProps } = headerGroup;\n  const headerGroupProps = getHeaderGroupProps({});\n\n  const totalVisible = columns.filter((column) => column.isVisible).length;\n\n  return {\n    headers,\n    headerGroupProps,\n    totalVisible,\n  };\n}\n", "import type { PropsWithChildren } from 'react';\nimport type {\n  ColumnInstance,\n  HeaderGroup as HeaderGroupType,\n} from 'react-table';\nimport HeaderColumn from '../HeaderColumn';\nimport { CLASS_NAMES } from './constants';\nimport useHeaderGroupProps from './useHeaderGroupProps';\n\nexport interface HeaderGroupProps<T extends Object> {\n  headerGroup: HeaderGroupType<T>;\n  columns: ColumnInstance<T>[];\n  isLoading?: boolean;\n}\n\nfunction HeaderGroup<T extends Object>({\n  headerGroup,\n  columns,\n  isLoading,\n}: PropsWithChildren<HeaderGroupProps<T>>) {\n  const { headerGroupProps, headers } = useHeaderGroupProps(\n    headerGroup,\n    columns,\n  );\n\n  return (\n    <div {...headerGroupProps} className={CLASS_NAMES.base}>\n      {headers.map((column, index) => (\n        <HeaderColumn\n          index={index}\n          label={column.render('Header')}\n          isLoading={isLoading}\n          {...column.getHeaderProps(column.getSortByToggleProps())}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default HeaderGroup;\n", "import type { FunctionComponent, ReactNode } from 'react';\nimport type { TableCellProps } from 'react-table';\nimport { SkeletonLoader } from '@kanda-libs/ks-design-library';\nimport useCellClassNames from './useCellClassNames';\n\nexport interface CellProps extends TableCellProps {\n  index: number;\n  render: () => ReactNode;\n  compact?: boolean;\n  isLoading?: boolean;\n}\n\nconst Cell: FunctionComponent<CellProps> = function ({\n  render,\n  index,\n  compact = false,\n  isLoading = false,\n  ...props\n}) {\n  const classNames = useCellClassNames(index, compact, isLoading);\n\n  return (\n    <div {...props} className={classNames.cell}>\n      <div className={classNames.container}>\n        <div className={classNames.render}>\n          <SkeletonLoader\n            isLoading={isLoading}\n            afterLoading={<>{render()}</>}\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Cell;\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport type CellClassNamesHook = {\n  cell: string;\n  container: string;\n  render: string;\n};\n\nexport default function useCellClassNames(\n  index: number,\n  compact: boolean,\n  isLoading: boolean,\n): CellClassNamesHook {\n  return {\n    cell: clsx(\n      compact ? CLASS_NAMES.cell.compact : CLASS_NAMES.cell.base,\n      index === 0 ? '' : CLASS_NAMES.cell.padding,\n    ),\n    container: CLASS_NAMES.container,\n    render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,\n  };\n}\n", "export const CLASS_NAMES = {\n  container: 'flex w-full h-full',\n  render:\n    'w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis',\n  renderLoading: 'w-full my-auto mr-8 text-style-g',\n  cell: {\n    base: 'h-16 flex',\n    compact: 'h-8 flex',\n    padding: 'pl-4',\n  },\n};\n", "import { useClasses } from '@kanda-libs/ks-design-library';\nimport { CLASS_NAMES } from './constants';\n\nexport interface RowClassNamesHook {\n  base: string;\n  compact: string;\n  border: string;\n  hover: string;\n  button: string;\n}\n\nexport default function useRowClassNames(index: number): RowClassNamesHook {\n  const classNames = useClasses(CLASS_NAMES, {\n    base: ['.base', index === 9 ? '' : '.border', '.hover'],\n    button: ['.button'],\n  });\n\n  return classNames as RowClassNamesHook;\n}\n", "export const CLASS_NAMES = {\n  base: 'relative h-16',\n  compact: 'relative h-8',\n  border: 'border-b border-neutral-200',\n  hover: 'group hover:bg-neutral-50 cursor-pointer',\n  button: 'hidden group-hover:block',\n};\n", "import type { PropsWithChildren } from 'react';\nimport type { Row as RowType, TableRowProps } from 'react-table';\nimport Cell from '../Cell';\nimport useRowClassNames from './useRowClassNames';\n\nexport interface RowProps<T extends Object> extends TableRowProps {\n  cells: RowType<T>['cells'];\n  index: number;\n  compact?: boolean;\n  isLoading?: boolean;\n}\n\nfunction Row<T extends Object>({\n  cells,\n  index,\n  compact = false,\n  isLoading = false,\n  ...props\n}: PropsWithChildren<RowProps<T>>) {\n  const classNames = useRowClassNames(index);\n\n  console.log({\n    props,\n  });\n\n  return (\n    <div {...props} className={compact ? classNames.compact : classNames.base}>\n      {cells.map((cell, cellIndex) => (\n        <Cell\n          {...cell.getCellProps()}\n          index={cellIndex}\n          isLoading={isLoading}\n          render={() => cell.render('Cell')}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default Row;\n", "import { FormEvent, useCallback, useState } from 'react';\n\nexport interface SearchInputHook {\n  search: string;\n  onChange: (e: FormEvent<HTMLInputElement>) => void;\n  onSubmit: () => void;\n}\n\nexport default function useSearchInput(\n  onSearch: (search: string) => void,\n): SearchInputHook {\n  const [search, setSearch] = useState('');\n\n  const onChange = useCallback(\n    (e: FormEvent<HTMLInputElement>) => {\n      setSearch(e.currentTarget.value);\n    },\n    [setSearch],\n  );\n\n  const onSubmit = useCallback(() => {\n    onSearch(search);\n  }, [search, onSearch]);\n\n  return {\n    search,\n    onChange,\n    onSubmit,\n  };\n}\n", "import type { FunctionComponent } from 'react';\nimport useSearchInput from './useSearchInput';\n\nexport interface SearchInputProps {\n  onSearch: (search: string) => void;\n}\n\nconst SearchInput: FunctionComponent<SearchInputProps> = function ({\n  onSearch,\n}) {\n  const { search, onChange, onSubmit } = useSearchInput(onSearch);\n\n  return (\n    <div className=\"flex flex-row gap-x-2\">\n      <span>Search:</span>\n      <input type=\"text\" value={search} onChange={onChange} />\n      <button onClick={onSubmit}>Search</button>\n    </div>\n  );\n};\n\nexport default SearchInput;\n", "import type { TableInstance, Row } from '../../@types/index';\nimport {\n  useTable,\n  useGlobalFilter,\n  usePagination,\n  useSortBy,\n  useFlexLayout,\n  type IdType,\n  TableOptions,\n} from 'react-table';\nimport type { TableProps } from '.';\nimport { globalFilter } from './helpers/search';\nimport type { StringIndexedObject } from '@kanda-libs/ks-design-library';\n\nexport interface TablePropsHook<T extends StringIndexedObject<unknown>>\n  extends TableInstance<T> {\n  onSearch: (value: string) => void;\n}\n\nexport default function useTableProps<T extends StringIndexedObject<unknown>>({\n  columns,\n  data,\n  pageSize = 10,\n}: TableProps<T>): TablePropsHook<T> {\n  const table = useTable<T>(\n    {\n      columns,\n      data,\n      initialState: {\n        pageSize: 10,\n        pageIndex: 0,\n      },\n      autoResetGlobalFilter: false,\n      globalFilter: (\n        rows: Row<T>[],\n        searchKeys: IdType<T>[],\n        filterValue: string,\n      ) => globalFilter(rows, searchKeys, filterValue, pageSize),\n    } as unknown as TableOptions<T>,\n    useGlobalFilter,\n    useSortBy,\n    usePagination,\n    useFlexLayout,\n  );\n\n  const onSearch = (search: string) => {\n    table.setGlobalFilter(search);\n  };\n\n  return {\n    onSearch,\n    ...table,\n  };\n}\n", "import type { IdType } from 'react-table';\nimport type { Row } from '../../../@types/index';\nimport Fuse from 'fuse.js';\nimport type { StringIndexedObject } from '~/types';\n\nconst exactMatchSearch = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  filterValue: string,\n) => {\n  return rows.filter((row) => {\n    // Take all values from the row, and add them together in a string\n    // for the purposes of searching\n    const rowValues = Object.values(row.values).join(', ');\n\n    return rowValues.toLowerCase().includes(filterValue.toLowerCase());\n  });\n};\n\nconst excludeExactMatches = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  exactMatchRows: Row<T>[],\n) =>\n  rows.filter(\n    ({ id }) => exactMatchRows.filter((p) => p.id === id).length === 0,\n  );\n\nconst fuzzySearch = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  filterValue: string,\n  searchKeys: string[],\n  numberOfRows: number,\n  exactMatchRows: Row<T>[],\n): Row<T>[] => {\n  const currentRows = rows.map((row) => {\n    return row.values;\n  });\n\n  const fuse = new Fuse(currentRows, {\n    keys: searchKeys.map((key) => ({\n      name: key,\n      // Because FuseJS allows for dot notation,\n      // we need to use a function to get the value\n      // as the object returned from the table is flat,\n      // rather than nested\n      getFn: (obj: StringIndexedObject) => obj[key],\n    })),\n  });\n\n  const results = fuse\n    .search(filterValue)\n    .map(({ item }) => item)\n    .slice(0, numberOfRows);\n\n  const filteredResults = results\n    .map((result) => rows.find((row) => row.values.cid === result.cid))\n    .filter(Boolean) as Row<T>[];\n\n  return excludeExactMatches(filteredResults, exactMatchRows);\n};\n\nexport const globalFilter = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  searchKeys: IdType<T>[],\n  filterValue: string,\n  pageSize = 10,\n): Row<T>[] => {\n  if (filterValue.length < 1) {\n    return rows;\n  }\n\n  // Get the first 10 exact matches. The reason for this is that exact matching\n  // should take presedence over fuzzy matching. An exact match is more useful\n  // but also less expensive to compute. So there's no need to do a fuzzy search\n  // if there are >= 10 exact matches.\n  const exactMatches = exactMatchSearch(rows, filterValue).slice(0, pageSize);\n  const currentRowsExcludingExactMatches = excludeExactMatches(\n    rows,\n    exactMatches,\n  );\n\n  const fuzzyMatches = fuzzySearch(\n    currentRowsExcludingExactMatches,\n    filterValue,\n    searchKeys,\n    pageSize - exactMatches.length,\n    exactMatches,\n  );\n\n  const results = [...exactMatches, ...fuzzyMatches];\n\n  // Return the rows in the same order as the original rows\n  // to preserve sorting, which happens before fuzzy matching\n  return rows\n    .map(({ id }) => results.find((row) => row.id === id))\n    .filter(Boolean) as Row<T>[];\n};\n", "import type { StringIndexedObject } from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Column } from 'react-table';\nimport HeaderGroup from './components/HeaderGroup';\nimport Row from './components/Row';\nimport SearchInput from './components/SearchInput';\nimport useTableProps from './useTableProps';\n\nexport interface TableProps<T extends StringIndexedObject<unknown>> {\n  columns: Readonly<Column<T>[]>;\n  data: T[];\n  filter?: string;\n  pageSize?: number;\n  compact?: boolean;\n  isLoading?: boolean;\n}\n\nexport type TableFunctionComponent<\n  T extends StringIndexedObject<unknown> = any,\n> = FunctionComponent<TableProps<T>>;\n\nfunction Table<T extends StringIndexedObject<unknown>>({\n  compact = false,\n  isLoading = false,\n  ...props\n}: PropsWithChildren<TableProps<T>>) {\n  const { onSearch, page, prepareRow, columns, getTableProps, headerGroups } =\n    useTableProps(props);\n\n  return (\n    <>\n      <SearchInput\n        onSearch={(currentSearch) => {\n          onSearch(currentSearch);\n        }}\n      />\n      <div {...getTableProps()} className=\"w-full\">\n        <div>\n          {headerGroups.map((headerGroup) => (\n            <HeaderGroup\n              headerGroup={headerGroup}\n              columns={columns}\n              isLoading={isLoading}\n            />\n          ))}\n        </div>\n        {page.map((row, index) => {\n          prepareRow(row);\n          return (\n            <Row\n              {...row.getRowProps()}\n              index={index}\n              cells={row.cells}\n              compact={compact}\n              isLoading={isLoading}\n            />\n          );\n        })}\n      </div>\n    </>\n  );\n}\n\nexport default Table;\n"],
-  "mappings": "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",
-  "names": ["SkeletonLoader", "Icon", "BUTTON_CLASS_NAMES", "ICON_PROPS", "WRAPPER_STYLE", "WRAPPER_CLASS_NAMES", "jsx", "jsxs", "Button", "label", "props", "BUTTON_CLASS_NAMES", "Icon", "ICON_PROPS", "Button_default", "clsx", "useWrapperProps", "index", "containerStyle", "WRAPPER_STYLE", "clsx", "WRAPPER_CLASS_NAMES", "jsx", "Wrapper", "index", "children", "classNames", "containerStyle", "useWrapperProps", "Wrapper_default", "HeaderButton_default", "Button_default", "Wrapper_default", "clsx", "CLASS_NAMES", "useHeaderColumnProps", "index", "popoverButtons", "CLASS_NAMES", "clsx", "jsx", "HeaderColumn", "index", "isLoading", "popoverButtons", "label", "props", "classNames", "useHeaderColumnProps", "SkeletonLoader", "HeaderButton_default", "HeaderColumn_default", "CLASS_NAMES", "useHeaderGroupProps", "headerGroup", "columns", "headers", "getHeaderGroupProps", "headerGroupProps", "totalVisible", "column", "jsx", "HeaderGroup", "headerGroup", "columns", "isLoading", "headerGroupProps", "headers", "useHeaderGroupProps", "CLASS_NAMES", "column", "index", "HeaderColumn_default", "HeaderGroup_default", "SkeletonLoader", "clsx", "CLASS_NAMES", "useCellClassNames", "index", "compact", "isLoading", "clsx", "CLASS_NAMES", "Fragment", "jsx", "Cell", "render", "index", "compact", "isLoading", "props", "classNames", "useCellClassNames", "SkeletonLoader", "Cell_default", "useClasses", "CLASS_NAMES", "useRowClassNames", "index", "useClasses", "CLASS_NAMES", "jsx", "Row", "cells", "index", "compact", "isLoading", "props", "classNames", "useRowClassNames", "cell", "cellIndex", "Cell_default", "Row_default", "useCallback", "useState", "useSearchInput", "onSearch", "search", "setSearch", "onChange", "e", "onSubmit", "jsx", "jsxs", "SearchInput", "onSearch", "search", "onChange", "onSubmit", "useSearchInput", "SearchInput_default", "useTable", "useGlobalFilter", "usePagination", "useSortBy", "useFlexLayout", "Fuse", "exactMatchSearch", "rows", "filterValue", "row", "excludeExactMatches", "exactMatchRows", "id", "p", "fuzzySearch", "searchKeys", "numberOfRows", "currentRows", "filteredResults", "key", "obj", "item", "result", "globalFilter", "pageSize", "exactMatches", "currentRowsExcludingExactMatches", "fuzzyMatches", "results", "useTableProps", "columns", "data", "pageSize", "table", "useTable", "rows", "searchKeys", "filterValue", "globalFilter", "useGlobalFilter", "useSortBy", "usePagination", "useFlexLayout", "search", "Fragment", "jsx", "jsxs", "Table", "compact", "isLoading", "props", "onSearch", "page", "prepareRow", "columns", "getTableProps", "headerGroups", "useTableProps", "SearchInput_default", "currentSearch", "headerGroup", "HeaderGroup_default", "row", "index", "Row_default", "Table_default"]
+  "sources": ["../src/components/Table/index.tsx", "../src/components/Table/components/HeaderColumn/index.tsx", "../src/hooks/useMobileFullWidthCellStyle.ts", "../src/components/Table/components/HeaderButton/Button.tsx", "../src/components/Table/components/HeaderButton/constants.ts", "../src/components/Table/components/HeaderButton/useWrapperProps.ts", "../src/components/Table/components/HeaderButton/Wrapper.tsx", "../src/components/Table/components/HeaderButton/index.tsx", "../src/components/Table/components/HeaderColumn/useHeaderColumnProps.ts", "../src/components/Table/components/HeaderColumn/constants.ts", "../src/components/Table/components/HeaderGroup/constants.ts", "../src/components/Table/components/HeaderGroup/useHeaderGroupProps.ts", "../src/components/Table/components/HeaderGroup/index.tsx", "../src/components/Table/components/Cell/index.tsx", "../src/components/Table/components/Cell/useCellClassNames.ts", "../src/components/Table/components/Cell/constants.ts", "../src/components/Table/components/Row/useRowClassNames.ts", "../src/components/Table/components/Row/constants.ts", "../src/components/Table/components/Row/index.tsx", "../src/components/Table/components/Pages/index.tsx", "../src/components/Table/useTableProps.ts", "../src/components/Table/helpers/search.ts"],
+  "sourcesContent": ["import {\n  Pagination,\n  type StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\nimport type { Column } from 'react-table';\nimport HeaderGroup from './components/HeaderGroup';\nimport Pages from './components/Pages';\nimport useTableProps from './useTableProps';\n\nexport interface TableProps<T extends StringIndexedObject<unknown>> {\n  columns: Readonly<Column<T>[]>;\n  data: T[];\n  filter?: string;\n  pageSize?: number;\n  compact?: boolean;\n  isLoading?: boolean;\n  query?: string;\n}\n\nexport type TableFunctionComponent<\n  T extends StringIndexedObject<unknown> = any,\n> = FunctionComponent<TableProps<T>>;\n\nfunction Table<T extends StringIndexedObject<unknown>>({\n  compact = false,\n  isLoading = false,\n  ...props\n}: PropsWithChildren<TableProps<T>>) {\n  const {\n    page,\n    prepareRow,\n    columns,\n    getTableProps,\n    headerGroups,\n    paginationProps,\n  } = useTableProps(props);\n\n  return (\n    <>\n      <div {...getTableProps()} className=\"w-full\">\n        <div>\n          {headerGroups.map((headerGroup) => (\n            <HeaderGroup\n              headerGroup={headerGroup}\n              columns={columns}\n              isLoading={isLoading}\n            />\n          ))}\n        </div>\n        <Pages\n          page={page}\n          prepareRow={prepareRow}\n          isLoading={isLoading}\n          compact={compact}\n        />\n      </div>\n      <div className=\"px-4 py-2\">\n        <Pagination {...paginationProps} />\n      </div>\n    </>\n  );\n}\n\nexport default Table;\n", "import { SkeletonLoader } from '@kanda-libs/ks-design-library';\nimport type { FunctionComponent, ReactNode } from 'react';\nimport type { TableHeaderProps } from 'react-table';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\nimport HeaderButton from '../HeaderButton';\nimport useHeaderColumnProps from './useHeaderColumnProps';\n\nexport interface HeaderColumnProps extends TableHeaderProps {\n  index: number;\n  isLoading?: boolean;\n  popoverButtons?: boolean;\n  label: ReactNode;\n}\n\nconst HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({\n  index,\n  isLoading = false,\n  popoverButtons = false,\n  label,\n  ...props\n}) {\n  const { classNames } = useHeaderColumnProps(index, popoverButtons);\n\n  const { style: unformattedStyle, ...formattedProps } = props;\n  const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n  return (\n    <div {...formattedProps} style={style} className={classNames.main}>\n      <SkeletonLoader\n        isLoading={isLoading}\n        wrapperClassName={classNames.loading}\n        afterLoading={\n          <HeaderButton.Wrapper index={index}>\n            <HeaderButton.Button label={label} />\n          </HeaderButton.Wrapper>\n        }\n      />\n    </div>\n  );\n};\n\nexport default HeaderColumn;\n", "import { useIsDesktop } from '@kanda-libs/ks-design-library';\nimport type { CSSProperties } from 'react';\n\nexport type MobileFullWidthCellStyleHook = CSSProperties;\n\nexport default function useMobileFullWidthCellStyle(\n  style?: CSSProperties,\n): MobileFullWidthCellStyleHook {\n  if (!style) return {};\n\n  const isDesktop = useIsDesktop();\n\n  // For mobile, we want to make sure that the cell is always 100% width\n  const formattedStyle = {\n    ...style,\n    width: isDesktop ? style?.width : '100%',\n  };\n\n  return formattedStyle;\n}\n", "import type { FunctionComponent, HTMLAttributes, ReactNode } from 'react';\nimport { Icon } from '@kanda-libs/ks-design-library';\nimport { BUTTON_CLASS_NAMES, ICON_PROPS } from './constants';\n\nexport interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {\n  label: ReactNode;\n}\n\nconst Button: FunctionComponent<ButtonProps> = function ({ label, ...props }) {\n  return (\n    <button className={BUTTON_CLASS_NAMES} {...props}>\n      {label}\n      <Icon {...ICON_PROPS} />\n    </button>\n  );\n};\n\nexport default Button;\n", "export const BUTTON_CLASS_NAMES =\n  'flex px-3 py-1.75 h-9 -ml-3 my-auto rounded-lg bg-transparent hover:bg-neutral-100 text-style-g-em text-neutral-500 whitespace-nowrap z-20';\n\nexport const ICON_PROPS = {\n  icon: 'chevron-down',\n  stroke: 'neutral-500',\n  size: 12,\n  className: 'ml-2 my-auto',\n};\n\nexport const WRAPPER_STYLE = {\n  width: 'calc(100% + 16px)',\n};\n\nexport const WRAPPER_CLASS_NAMES = {\n  container: {\n    base: 'w-full h-full overflow-hidden',\n    padding: 'pl-4 -ml-4',\n  },\n  flex: {\n    base: 'w-full h-full md:flex px-4 md:px-0',\n    padding: 'md:pl-4',\n  },\n};\n", "import type { CSSProperties } from 'react';\nimport clsx from 'clsx';\nimport { WRAPPER_STYLE, WRAPPER_CLASS_NAMES } from './constants';\n\nexport interface WrapperPropsHook {\n  classNames: {\n    container: string;\n    flex: string;\n  };\n  containerStyle: CSSProperties;\n}\n\nexport default function useWrapperProps(index: number): WrapperPropsHook {\n  const containerStyle = index === 0 ? WRAPPER_STYLE : {};\n\n  const classNames = {\n    container: clsx(\n      WRAPPER_CLASS_NAMES.container.base,\n      index === 0 ? WRAPPER_CLASS_NAMES.container.padding : '',\n    ),\n    flex: clsx(\n      WRAPPER_CLASS_NAMES.flex.base,\n      index === 0 ? '' : WRAPPER_CLASS_NAMES.flex.padding,\n    ),\n  };\n\n  return {\n    classNames,\n    containerStyle,\n  };\n}\n", "import type { FunctionComponent } from 'react';\nimport useWrapperProps from './useWrapperProps';\n\nexport interface WrapperProps {\n  index: number;\n  children?: JSX.Element | JSX.Element[];\n}\n\nconst Wrapper: FunctionComponent<WrapperProps> = function ({\n  index,\n  children,\n}) {\n  const { classNames, containerStyle } = useWrapperProps(index);\n\n  return (\n    <div className={classNames.container} style={containerStyle}>\n      <div className={classNames.flex}>{children}</div>\n    </div>\n  );\n};\n\nexport default Wrapper;\n", "import Button from './Button';\nimport Wrapper from './Wrapper';\n\nexport default {\n  Button,\n  Wrapper,\n};\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport interface HeaderColumnPropsHook {\n  classNames: {\n    main: string;\n    loading: string;\n    wrapper: string;\n  };\n}\n\nexport default function useHeaderColumnProps(\n  index: number,\n  popoverButtons: boolean,\n): HeaderColumnPropsHook {\n  const classNames = {\n    ...CLASS_NAMES,\n    loading: clsx(\n      CLASS_NAMES.loading.base,\n      index === 0 ? '' : CLASS_NAMES.loading.margin,\n    ),\n    wrapper: clsx(\n      CLASS_NAMES.wrapper.padding,\n      popoverButtons ? '' : CLASS_NAMES.wrapper.popover,\n    ),\n  };\n\n  return {\n    classNames,\n  };\n}\n", "export const CLASS_NAMES = {\n  main: 'flex md:h-14',\n  loading: {\n    base: 'my-auto w-full mr-8',\n    margin: 'ml-4',\n  },\n  wrapper: {\n    padding: 'md:px-2 md:pt-2',\n    popover: 'pb-1',\n  },\n};\n\nexport const MOVE_LEFT_ITEM_PROPS = {\n  name: 'Move column left',\n  icon: 'arrow-left',\n};\n\nexport const MOVE_RIGHT_ITEM_PROPS = {\n  name: 'Move column right',\n  icon: 'arrow-right',\n};\n\nexport const HIDE_COLUMN_PROPS = {\n  name: 'Hide column',\n  icon: 'eye-off',\n};\n", "export const CLASS_NAMES = {\n  base: 'flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200',\n};\n", "import type {\n  ColumnInstance,\n  HeaderGroup,\n  TableHeaderProps,\n} from 'react-table';\n\nexport interface HeaderGroupPropsHook<T extends Object> {\n  headers: ColumnInstance<T>[];\n  headerGroupProps: TableHeaderProps;\n  totalVisible: number;\n}\n\nexport default function useHeaderGroupProps<T extends Object>(\n  headerGroup: HeaderGroup<T>,\n  columns: ColumnInstance<T>[],\n): HeaderGroupPropsHook<T> {\n  const { headers, getHeaderGroupProps } = headerGroup;\n  const headerGroupProps = getHeaderGroupProps({});\n\n  const totalVisible = columns.filter((column) => column.isVisible).length;\n\n  return {\n    headers,\n    headerGroupProps,\n    totalVisible,\n  };\n}\n", "import type { PropsWithChildren } from 'react';\nimport type {\n  ColumnInstance,\n  HeaderGroup as HeaderGroupType,\n} from 'react-table';\nimport HeaderColumn from '../HeaderColumn';\nimport { CLASS_NAMES } from './constants';\nimport useHeaderGroupProps from './useHeaderGroupProps';\n\nexport interface HeaderGroupProps<T extends Object> {\n  headerGroup: HeaderGroupType<T>;\n  columns: ColumnInstance<T>[];\n  isLoading?: boolean;\n}\n\nfunction HeaderGroup<T extends Object>({\n  headerGroup,\n  columns,\n  isLoading,\n}: PropsWithChildren<HeaderGroupProps<T>>) {\n  const { headerGroupProps, headers } = useHeaderGroupProps(\n    headerGroup,\n    columns,\n  );\n\n  return (\n    <div {...headerGroupProps} className={CLASS_NAMES.base}>\n      {headers.map((column, index) => (\n        <HeaderColumn\n          index={index}\n          label={column.render('Header')}\n          isLoading={isLoading}\n          {...column.getHeaderProps(column.getSortByToggleProps())}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default HeaderGroup;\n", "import type { FunctionComponent, ReactNode } from 'react';\nimport type { TableCellProps } from 'react-table';\nimport { SkeletonLoader, Text } from '@kanda-libs/ks-design-library';\nimport useCellClassNames from './useCellClassNames';\nimport useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';\n\nexport interface CellProps extends TableCellProps {\n  index: number;\n  render: () => ReactNode;\n  compact?: boolean;\n  isLoading?: boolean;\n  label?: string;\n}\n\nconst Cell: FunctionComponent<CellProps> = function ({\n  render,\n  index,\n  compact = false,\n  isLoading = false,\n  label,\n  ...props\n}) {\n  const classNames = useCellClassNames(index, compact, isLoading);\n\n  const { style: unformattedStyle, ...formattedProps } = props;\n  const style = useMobileFullWidthCellStyle(unformattedStyle);\n\n  return (\n    <div {...formattedProps} style={style} className={classNames.cell}>\n      <div className={classNames.container}>\n        <div className={classNames.render}>\n          <SkeletonLoader\n            isLoading={isLoading}\n            afterLoading={\n              <>\n                <Text text={`${label}:`} className={classNames.mobileLabel} />\n                {render()}\n              </>\n            }\n          />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Cell;\n", "import clsx from 'clsx';\nimport { CLASS_NAMES } from './constants';\n\nexport type CellClassNamesHook = {\n  cell: string;\n  container: string;\n  render: string;\n  mobileLabel: string;\n};\n\nexport default function useCellClassNames(\n  index: number,\n  compact: boolean,\n  isLoading: boolean,\n): CellClassNamesHook {\n  return {\n    cell: clsx(\n      compact ? CLASS_NAMES.cell.compact : CLASS_NAMES.cell.base,\n      index === 0 ? '' : CLASS_NAMES.cell.padding,\n    ),\n    container: CLASS_NAMES.container,\n    render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,\n    mobileLabel: CLASS_NAMES.mobileLabel,\n  };\n}\n", "export const CLASS_NAMES = {\n  container: 'flex w-full h-full',\n  render:\n    'w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis',\n  renderLoading: 'w-full my-auto mr-8 text-style-g',\n  mobileLabel: 'block md:hidden text-16-24-em text-neutral-600 mr-2',\n  cell: {\n    base: 'px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex',\n    compact: 'h-8 flex',\n    padding: 'md:pl-4',\n  },\n};\n", "import { useClasses } from '@kanda-libs/ks-design-library';\nimport { CLASS_NAMES } from './constants';\n\nexport interface RowClassNamesHook {\n  base: string;\n  compact: string;\n  border: string;\n  hover: string;\n  button: string;\n}\n\nexport default function useRowClassNames(index: number): RowClassNamesHook {\n  const classNames = useClasses(CLASS_NAMES, {\n    base: ['.base', index === 9 ? '' : '.border', '.hover'],\n    button: ['.button'],\n  });\n\n  return classNames as RowClassNamesHook;\n}\n", "export const CLASS_NAMES = {\n  base: 'relative md:h-16 flex-col py-2 md:py-0 md:flex-row',\n  compact: 'relative h-8',\n  border: 'border-b border-neutral-200',\n  hover: 'group hover:bg-neutral-50 cursor-pointer',\n  button: 'hidden group-hover:block',\n};\n", "import type { PropsWithChildren } from 'react';\nimport type { Row as RowType, TableRowProps } from 'react-table';\nimport Cell from '../Cell';\nimport useRowClassNames from './useRowClassNames';\n\nexport interface RowProps<T extends Object> extends TableRowProps {\n  cells: RowType<T>['cells'];\n  index: number;\n  compact?: boolean;\n  isLoading?: boolean;\n}\n\nfunction Row<T extends Object>({\n  cells,\n  index,\n  compact = false,\n  isLoading = false,\n  ...props\n}: PropsWithChildren<RowProps<T>>) {\n  const classNames = useRowClassNames(index);\n\n  return (\n    <div {...props} className={compact ? classNames.compact : classNames.base}>\n      {cells.map((cell, cellIndex) => (\n        <Cell\n          {...cell.getCellProps()}\n          index={cellIndex}\n          isLoading={isLoading}\n          render={() => cell.render('Cell')}\n          label={cell.column.Header as string}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default Row;\n", "import type { StringIndexedObject } from '@kanda-libs/ks-design-library';\nimport type { PropsWithChildren } from 'react';\nimport type { Row as RowType } from 'react-table';\nimport Row from '../Row';\n\nexport interface PagesProps<T extends StringIndexedObject> {\n  page: RowType<T>[];\n  prepareRow: (row: RowType<T>) => void;\n  isLoading?: boolean;\n  compact?: boolean;\n}\n\nfunction Pages<T extends StringIndexedObject>({\n  page,\n  prepareRow,\n  isLoading = false,\n  compact = false,\n}: PropsWithChildren<PagesProps<T>>) {\n  return (\n    <>\n      {page.map((row, index) => {\n        prepareRow(row);\n        return (\n          <Row\n            {...row.getRowProps()}\n            index={index}\n            cells={row.cells}\n            isLoading={isLoading}\n            compact={compact}\n          />\n        );\n      })}\n    </>\n  );\n}\nexport default Pages;\n", "import type { TableInstance, Row } from '../../@types/index';\nimport {\n  useTable,\n  useGlobalFilter,\n  usePagination,\n  useSortBy,\n  useFlexLayout,\n  type IdType,\n  TableOptions,\n} from 'react-table';\nimport type { TableProps } from '.';\nimport { globalFilter } from './helpers/search';\nimport type {\n  PaginationProps,\n  StringIndexedObject,\n} from '@kanda-libs/ks-design-library';\nimport { useEffect } from 'react';\n\nexport interface TablePropsHook<T extends StringIndexedObject<unknown>>\n  extends TableInstance<T> {\n  paginationProps: PaginationProps;\n}\n\nexport default function useTableProps<T extends StringIndexedObject<unknown>>({\n  columns,\n  data,\n  pageSize = 10,\n  query = '',\n}: TableProps<T>): TablePropsHook<T> {\n  const table = useTable<T>(\n    {\n      columns,\n      data,\n      initialState: {\n        pageSize: 10,\n        pageIndex: 0,\n      },\n      autoResetGlobalFilter: false,\n      globalFilter: (\n        rows: Row<T>[],\n        searchKeys: IdType<T>[],\n        filterValue: string,\n      ) => globalFilter(rows, searchKeys, filterValue, pageSize),\n    } as unknown as TableOptions<T>,\n    useGlobalFilter,\n    useSortBy,\n    usePagination,\n    useFlexLayout,\n  );\n\n  const {\n    gotoPage,\n    pageCount,\n    state: { pageIndex },\n  } = table;\n\n  const paginationProps: PaginationProps = {\n    pageCount,\n    pageIndex,\n    setPage: (nextPage: number) => {\n      gotoPage(nextPage);\n    },\n  };\n\n  useEffect(() => {\n    table.setGlobalFilter(query);\n  }, [query]);\n\n  return {\n    paginationProps,\n    ...table,\n  };\n}\n", "import type { IdType } from 'react-table';\nimport type { Row } from '../../../@types/index';\nimport Fuse from 'fuse.js';\nimport type { StringIndexedObject } from '~/types';\n\nconst exactMatchSearch = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  filterValue: string,\n) => {\n  return rows.filter((row) => {\n    // Take all values from the row, and add them together in a string\n    // for the purposes of searching\n    const rowValues = Object.values(row.values).join(', ');\n\n    return rowValues.toLowerCase().includes(filterValue.toLowerCase());\n  });\n};\n\nconst excludeExactMatches = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  exactMatchRows: Row<T>[],\n) =>\n  rows.filter(\n    ({ id }) => exactMatchRows.filter((p) => p.id === id).length === 0,\n  );\n\nconst fuzzySearch = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  filterValue: string,\n  searchKeys: string[],\n  numberOfRows: number,\n  exactMatchRows: Row<T>[],\n): Row<T>[] => {\n  const currentRows = rows.map((row) => {\n    return row.values;\n  });\n\n  const fuse = new Fuse(currentRows, {\n    keys: searchKeys.map((key) => ({\n      name: key,\n      // Because FuseJS allows for dot notation,\n      // we need to use a function to get the value\n      // as the object returned from the table is flat,\n      // rather than nested\n      getFn: (obj: StringIndexedObject) => obj[key],\n    })),\n  });\n\n  const results = fuse\n    .search(filterValue)\n    .map(({ item }) => item)\n    .slice(0, numberOfRows);\n\n  const filteredResults = results\n    .map((result) => rows.find((row) => row.values.cid === result.cid))\n    .filter(Boolean) as Row<T>[];\n\n  return excludeExactMatches(filteredResults, exactMatchRows);\n};\n\nexport const globalFilter = <T extends StringIndexedObject<unknown>>(\n  rows: Row<T>[],\n  searchKeys: IdType<T>[],\n  filterValue: string,\n  pageSize = 10,\n): Row<T>[] => {\n  if (filterValue.length < 1) {\n    return rows;\n  }\n\n  // Get the first 10 exact matches. The reason for this is that exact matching\n  // should take presedence over fuzzy matching. An exact match is more useful\n  // but also less expensive to compute. So there's no need to do a fuzzy search\n  // if there are >= 10 exact matches.\n  const exactMatches = exactMatchSearch(rows, filterValue).slice(0, pageSize);\n  const currentRowsExcludingExactMatches = excludeExactMatches(\n    rows,\n    exactMatches,\n  );\n\n  const fuzzyMatches = fuzzySearch(\n    currentRowsExcludingExactMatches,\n    filterValue,\n    searchKeys,\n    pageSize - exactMatches.length,\n    exactMatches,\n  );\n\n  const results = [...exactMatches, ...fuzzyMatches];\n\n  // Return the rows in the same order as the original rows\n  // to preserve sorting, which happens before fuzzy matching\n  return rows\n    .map(({ id }) => results.find((row) => row.id === id))\n    .filter(Boolean) as Row<T>[];\n};\n"],
+  "mappings": "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",
+  "names": ["Pagination", "SkeletonLoader", "useIsDesktop", "useMobileFullWidthCellStyle", "style", "isDesktop", "Icon", "BUTTON_CLASS_NAMES", "ICON_PROPS", "WRAPPER_STYLE", "WRAPPER_CLASS_NAMES", "jsx", "jsxs", "Button", "label", "props", "BUTTON_CLASS_NAMES", "Icon", "ICON_PROPS", "Button_default", "clsx", "useWrapperProps", "index", "containerStyle", "WRAPPER_STYLE", "clsx", "WRAPPER_CLASS_NAMES", "jsx", "Wrapper", "index", "children", "classNames", "containerStyle", "useWrapperProps", "Wrapper_default", "HeaderButton_default", "Button_default", "Wrapper_default", "clsx", "CLASS_NAMES", "useHeaderColumnProps", "index", "popoverButtons", "CLASS_NAMES", "clsx", "jsx", "HeaderColumn", "index", "isLoading", "popoverButtons", "label", "props", "classNames", "useHeaderColumnProps", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "HeaderButton_default", "HeaderColumn_default", "CLASS_NAMES", "useHeaderGroupProps", "headerGroup", "columns", "headers", "getHeaderGroupProps", "headerGroupProps", "totalVisible", "column", "jsx", "HeaderGroup", "headerGroup", "columns", "isLoading", "headerGroupProps", "headers", "useHeaderGroupProps", "CLASS_NAMES", "column", "index", "HeaderColumn_default", "HeaderGroup_default", "SkeletonLoader", "Text", "clsx", "CLASS_NAMES", "useCellClassNames", "index", "compact", "isLoading", "clsx", "CLASS_NAMES", "Fragment", "jsx", "jsxs", "Cell", "render", "index", "compact", "isLoading", "label", "props", "classNames", "useCellClassNames", "unformattedStyle", "formattedProps", "style", "useMobileFullWidthCellStyle", "SkeletonLoader", "Text", "Cell_default", "useClasses", "CLASS_NAMES", "useRowClassNames", "index", "useClasses", "CLASS_NAMES", "jsx", "Row", "cells", "index", "compact", "isLoading", "props", "classNames", "useRowClassNames", "cell", "cellIndex", "Cell_default", "Row_default", "Fragment", "jsx", "Pages", "page", "prepareRow", "isLoading", "compact", "row", "index", "Row_default", "Pages_default", "useTable", "useGlobalFilter", "usePagination", "useSortBy", "useFlexLayout", "Fuse", "exactMatchSearch", "rows", "filterValue", "row", "excludeExactMatches", "exactMatchRows", "id", "p", "fuzzySearch", "searchKeys", "numberOfRows", "currentRows", "filteredResults", "key", "obj", "item", "result", "globalFilter", "pageSize", "exactMatches", "currentRowsExcludingExactMatches", "fuzzyMatches", "results", "useEffect", "useTableProps", "columns", "data", "pageSize", "query", "table", "useTable", "rows", "searchKeys", "filterValue", "globalFilter", "useGlobalFilter", "useSortBy", "usePagination", "useFlexLayout", "gotoPage", "pageCount", "pageIndex", "paginationProps", "nextPage", "Fragment", "jsx", "jsxs", "Table", "compact", "isLoading", "props", "page", "prepareRow", "columns", "getTableProps", "headerGroups", "paginationProps", "useTableProps", "headerGroup", "HeaderGroup_default", "Pages_default", "Pagination", "Table_default"]
 }

package/dist/library.css

@@ -776,6 +776,12 @@ video {
   line-height: 24px;
 }
 
+.text-16-24-em {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .text-16-20-em {
   font-weight: 600;
   font-size: 16px;
@@ -997,6 +1003,10 @@ video {
   margin-right: 32px;
 }
 
+.mr-2 {
+  margin-right: 8px;
+}
+
 .-ml-3 {
   margin-left: -12px;
 }
@@ -1013,6 +1023,10 @@ video {
   margin-left: 16px;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -1029,10 +1043,6 @@ video {
   height: 100%;
 }
 
-.h-16 {
-  height: 64px;
-}
-
 .h-8 {
   height: 32px;
 }
@@ -1041,10 +1051,6 @@ video {
   height: 36px;
 }
 
-.h-14 {
-  height: 56px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -1057,13 +1063,8 @@ video {
   cursor: pointer;
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
-.gap-x-2 {
-  -moz-column-gap: 8px;
-       column-gap: 8px;
+.flex-col {
+  flex-direction: column;
 }
 
 .overflow-hidden {
@@ -1099,14 +1100,14 @@ video {
   background-color: transparent;
 }
 
-.px-3 {
-  padding-left: 12px;
-  padding-right: 12px;
+.px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
-.py-1\.75 {
-  padding-top: 7px;
-  padding-bottom: 7px;
+.py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .py-1 {
@@ -1114,17 +1115,18 @@ video {
   padding-bottom: 4px;
 }
 
-.px-2 {
-  padding-left: 8px;
-  padding-right: 8px;
+.px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.pl-4 {
-  padding-left: 16px;
+.py-1\.75 {
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 
-.pt-2 {
-  padding-top: 8px;
+.pl-4 {
+  padding-left: 16px;
 }
 
 .pb-1 {
@@ -2051,3 +2053,66 @@ Modified version of toast CSS to match designs
 .group:hover .group-hover\:block {
   display: block;
 }
+
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-16 {
+    height: 64px;
+  }
+
+  .md\:h-14 {
+    height: 56px;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .md\:px-2 {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .md\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .md\:pt-0 {
+    padding-top: 0;
+  }
+
+  .md\:pr-0 {
+    padding-right: 0;
+  }
+
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .md\:pl-4 {
+    padding-left: 16px;
+  }
+
+  .md\:pt-2 {
+    padding-top: 8px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:block {
+    display: block;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-design-library-new",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Kanda design components library",
   "main": "dist/index.esm.mjs",
   "module": "dist/index.esm.mjs",

package/src/components/Table/components/Cell/constants.ts

@@ -3,9 +3,10 @@ export const CLASS_NAMES = {
   render:
     'w-full my-auto text-style-g text-neutral-600 whitespace-nowrap overflow-hidden overflow-ellipsis',
   renderLoading: 'w-full my-auto mr-8 text-style-g',
+  mobileLabel: 'block md:hidden text-16-24-em text-neutral-600 mr-2',
   cell: {
-    base: 'h-16 flex',
+    base: 'px-4 py-1 md:pt-0 md:pr-0 md:pb-0 md:h-16 flex',
     compact: 'h-8 flex',
-    padding: 'pl-4',
+    padding: 'md:pl-4',
   },
 };

package/src/components/Table/components/Cell/index.tsx

@@ -1,13 +1,15 @@
 import type { FunctionComponent, ReactNode } from 'react';
 import type { TableCellProps } from 'react-table';
-import { SkeletonLoader } from '@kanda-libs/ks-design-library';
+import { SkeletonLoader, Text } from '@kanda-libs/ks-design-library';
 import useCellClassNames from './useCellClassNames';
+import useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';
 
 export interface CellProps extends TableCellProps {
   index: number;
   render: () => ReactNode;
   compact?: boolean;
   isLoading?: boolean;
+  label?: string;
 }
 
 const Cell: FunctionComponent<CellProps> = function ({
@@ -15,17 +17,26 @@ const Cell: FunctionComponent<CellProps> = function ({
   index,
   compact = false,
   isLoading = false,
+  label,
   ...props
 }) {
   const classNames = useCellClassNames(index, compact, isLoading);
 
+  const { style: unformattedStyle, ...formattedProps } = props;
+  const style = useMobileFullWidthCellStyle(unformattedStyle);
+
   return (
-    <div {...props} className={classNames.cell}>
+    <div {...formattedProps} style={style} className={classNames.cell}>
       <div className={classNames.container}>
         <div className={classNames.render}>
           <SkeletonLoader
             isLoading={isLoading}
-            afterLoading={<>{render()}</>}
+            afterLoading={
+              <>
+                <Text text={`${label}:`} className={classNames.mobileLabel} />
+                {render()}
+              </>
+            }
           />
         </div>
       </div>

package/src/components/Table/components/Cell/useCellClassNames.ts

@@ -5,6 +5,7 @@ export type CellClassNamesHook = {
   cell: string;
   container: string;
   render: string;
+  mobileLabel: string;
 };
 
 export default function useCellClassNames(
@@ -19,5 +20,6 @@ export default function useCellClassNames(
     ),
     container: CLASS_NAMES.container,
     render: isLoading ? CLASS_NAMES.renderLoading : CLASS_NAMES.render,
+    mobileLabel: CLASS_NAMES.mobileLabel,
   };
 }

package/src/components/Table/components/HeaderButton/constants.ts

@@ -18,7 +18,7 @@ export const WRAPPER_CLASS_NAMES = {
     padding: 'pl-4 -ml-4',
   },
   flex: {
-    base: 'w-full h-full flex',
-    padding: 'pl-4',
+    base: 'w-full h-full md:flex px-4 md:px-0',
+    padding: 'md:pl-4',
   },
 };

package/src/components/Table/components/HeaderColumn/constants.ts

@@ -1,11 +1,11 @@
 export const CLASS_NAMES = {
-  main: 'flex h-14',
+  main: 'flex md:h-14',
   loading: {
     base: 'my-auto w-full mr-8',
     margin: 'ml-4',
   },
   wrapper: {
-    padding: 'px-2 pt-2',
+    padding: 'md:px-2 md:pt-2',
     popover: 'pb-1',
   },
 };

package/src/components/Table/components/HeaderColumn/index.tsx

@@ -1,6 +1,7 @@
 import { SkeletonLoader } from '@kanda-libs/ks-design-library';
 import type { FunctionComponent, ReactNode } from 'react';
 import type { TableHeaderProps } from 'react-table';
+import useMobileFullWidthCellStyle from '~/hooks/useMobileFullWidthCellStyle';
 import HeaderButton from '../HeaderButton';
 import useHeaderColumnProps from './useHeaderColumnProps';
 
@@ -20,8 +21,11 @@ const HeaderColumn: FunctionComponent<HeaderColumnProps> = function ({
 }) {
   const { classNames } = useHeaderColumnProps(index, popoverButtons);
 
+  const { style: unformattedStyle, ...formattedProps } = props;
+  const style = useMobileFullWidthCellStyle(unformattedStyle);
+
   return (
-    <div {...props} className={classNames.main}>
+    <div {...formattedProps} style={style} className={classNames.main}>
       <SkeletonLoader
         isLoading={isLoading}
         wrapperClassName={classNames.loading}

package/src/components/Table/components/HeaderGroup/constants.ts

@@ -1,3 +1,3 @@
 export const CLASS_NAMES = {
-  base: 'h-14 border-b border-neutral-200',
+  base: 'flex-col md:flex-row md:h-14 hidden lg:block border-b border-neutral-200',
 };

package/src/components/Table/components/Pages/index.tsx

@@ -0,0 +1,36 @@
+import type { StringIndexedObject } from '@kanda-libs/ks-design-library';
+import type { PropsWithChildren } from 'react';
+import type { Row as RowType } from 'react-table';
+import Row from '../Row';
+
+export interface PagesProps<T extends StringIndexedObject> {
+  page: RowType<T>[];
+  prepareRow: (row: RowType<T>) => void;
+  isLoading?: boolean;
+  compact?: boolean;
+}
+
+function Pages<T extends StringIndexedObject>({
+  page,
+  prepareRow,
+  isLoading = false,
+  compact = false,
+}: PropsWithChildren<PagesProps<T>>) {
+  return (
+    <>
+      {page.map((row, index) => {
+        prepareRow(row);
+        return (
+          <Row
+            {...row.getRowProps()}
+            index={index}
+            cells={row.cells}
+            isLoading={isLoading}
+            compact={compact}
+          />
+        );
+      })}
+    </>
+  );
+}
+export default Pages;

package/src/components/Table/components/Row/constants.ts

@@ -1,5 +1,5 @@
 export const CLASS_NAMES = {
-  base: 'relative h-16',
+  base: 'relative md:h-16 flex-col py-2 md:py-0 md:flex-row',
   compact: 'relative h-8',
   border: 'border-b border-neutral-200',
   hover: 'group hover:bg-neutral-50 cursor-pointer',

package/src/components/Table/components/Row/index.tsx

@@ -19,10 +19,6 @@ function Row<T extends Object>({
 }: PropsWithChildren<RowProps<T>>) {
   const classNames = useRowClassNames(index);
 
-  console.log({
-    props,
-  });
-
   return (
     <div {...props} className={compact ? classNames.compact : classNames.base}>
       {cells.map((cell, cellIndex) => (
@@ -31,6 +27,7 @@ function Row<T extends Object>({
           index={cellIndex}
           isLoading={isLoading}
           render={() => cell.render('Cell')}
+          label={cell.column.Header as string}
         />
       ))}
     </div>

package/src/components/Table/index.tsx

@@ -1,9 +1,11 @@
-import type { StringIndexedObject } from '@kanda-libs/ks-design-library';
+import {
+  Pagination,
+  type StringIndexedObject,
+} from '@kanda-libs/ks-design-library';
 import type { FunctionComponent, PropsWithChildren } from 'react';
 import type { Column } from 'react-table';
 import HeaderGroup from './components/HeaderGroup';
-import Row from './components/Row';
-import SearchInput from './components/SearchInput';
+import Pages from './components/Pages';
 import useTableProps from './useTableProps';
 
 export interface TableProps<T extends StringIndexedObject<unknown>> {
@@ -13,6 +15,7 @@ export interface TableProps<T extends StringIndexedObject<unknown>> {
   pageSize?: number;
   compact?: boolean;
   isLoading?: boolean;
+  query?: string;
 }
 
 export type TableFunctionComponent<
@@ -24,16 +27,17 @@ function Table<T extends StringIndexedObject<unknown>>({
   isLoading = false,
   ...props
 }: PropsWithChildren<TableProps<T>>) {
-  const { onSearch, page, prepareRow, columns, getTableProps, headerGroups } =
-    useTableProps(props);
+  const {
+    page,
+    prepareRow,
+    columns,
+    getTableProps,
+    headerGroups,
+    paginationProps,
+  } = useTableProps(props);
 
   return (
     <>
-      <SearchInput
-        onSearch={(currentSearch) => {
-          onSearch(currentSearch);
-        }}
-      />
       <div {...getTableProps()} className="w-full">
         <div>
           {headerGroups.map((headerGroup) => (
@@ -44,18 +48,15 @@ function Table<T extends StringIndexedObject<unknown>>({
             />
           ))}
         </div>
-        {page.map((row, index) => {
-          prepareRow(row);
-          return (
-            <Row
-              {...row.getRowProps()}
-              index={index}
-              cells={row.cells}
-              compact={compact}
-              isLoading={isLoading}
-            />
-          );
-        })}
+        <Pages
+          page={page}
+          prepareRow={prepareRow}
+          isLoading={isLoading}
+          compact={compact}
+        />
+      </div>
+      <div className="px-4 py-2">
+        <Pagination {...paginationProps} />
       </div>
     </>
   );

package/src/components/Table/useTableProps.ts

@@ -10,17 +10,22 @@ import {
 } from 'react-table';
 import type { TableProps } from '.';
 import { globalFilter } from './helpers/search';
-import type { StringIndexedObject } from '@kanda-libs/ks-design-library';
+import type {
+  PaginationProps,
+  StringIndexedObject,
+} from '@kanda-libs/ks-design-library';
+import { useEffect } from 'react';
 
 export interface TablePropsHook<T extends StringIndexedObject<unknown>>
   extends TableInstance<T> {
-  onSearch: (value: string) => void;
+  paginationProps: PaginationProps;
 }
 
 export default function useTableProps<T extends StringIndexedObject<unknown>>({
   columns,
   data,
   pageSize = 10,
+  query = '',
 }: TableProps<T>): TablePropsHook<T> {
   const table = useTable<T>(
     {
@@ -43,12 +48,26 @@ export default function useTableProps<T extends StringIndexedObject<unknown>>({
     useFlexLayout,
   );
 
-  const onSearch = (search: string) => {
-    table.setGlobalFilter(search);
+  const {
+    gotoPage,
+    pageCount,
+    state: { pageIndex },
+  } = table;
+
+  const paginationProps: PaginationProps = {
+    pageCount,
+    pageIndex,
+    setPage: (nextPage: number) => {
+      gotoPage(nextPage);
+    },
   };
 
+  useEffect(() => {
+    table.setGlobalFilter(query);
+  }, [query]);
+
   return {
-    onSearch,
+    paginationProps,
     ...table,
   };
 }

package/src/hooks/useMobileFullWidthCellStyle.ts

@@ -0,0 +1,20 @@
+import { useIsDesktop } from '@kanda-libs/ks-design-library';
+import type { CSSProperties } from 'react';
+
+export type MobileFullWidthCellStyleHook = CSSProperties;
+
+export default function useMobileFullWidthCellStyle(
+  style?: CSSProperties,
+): MobileFullWidthCellStyleHook {
+  if (!style) return {};
+
+  const isDesktop = useIsDesktop();
+
+  // For mobile, we want to make sure that the cell is always 100% width
+  const formattedStyle = {
+    ...style,
+    width: isDesktop ? style?.width : '100%',
+  };
+
+  return formattedStyle;
+}

package/src/styles/library.css

@@ -776,6 +776,12 @@ video {
   line-height: 24px;
 }
 
+.text-16-24-em {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .text-16-20-em {
   font-weight: 600;
   font-size: 16px;
@@ -997,6 +1003,10 @@ video {
   margin-right: 32px;
 }
 
+.mr-2 {
+  margin-right: 8px;
+}
+
 .-ml-3 {
   margin-left: -12px;
 }
@@ -1013,6 +1023,10 @@ video {
   margin-left: 16px;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -1029,10 +1043,6 @@ video {
   height: 100%;
 }
 
-.h-16 {
-  height: 64px;
-}
-
 .h-8 {
   height: 32px;
 }
@@ -1041,10 +1051,6 @@ video {
   height: 36px;
 }
 
-.h-14 {
-  height: 56px;
-}
-
 .w-full {
   width: 100%;
 }
@@ -1057,13 +1063,8 @@ video {
   cursor: pointer;
 }
 
-.flex-row {
-  flex-direction: row;
-}
-
-.gap-x-2 {
-  -moz-column-gap: 8px;
-       column-gap: 8px;
+.flex-col {
+  flex-direction: column;
 }
 
 .overflow-hidden {
@@ -1099,14 +1100,14 @@ video {
   background-color: transparent;
 }
 
-.px-3 {
-  padding-left: 12px;
-  padding-right: 12px;
+.px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
-.py-1\.75 {
-  padding-top: 7px;
-  padding-bottom: 7px;
+.py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .py-1 {
@@ -1114,17 +1115,18 @@ video {
   padding-bottom: 4px;
 }
 
-.px-2 {
-  padding-left: 8px;
-  padding-right: 8px;
+.px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.pl-4 {
-  padding-left: 16px;
+.py-1\.75 {
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 
-.pt-2 {
-  padding-top: 8px;
+.pl-4 {
+  padding-left: 16px;
 }
 
 .pb-1 {
@@ -2051,3 +2053,66 @@ Modified version of toast CSS to match designs
 .group:hover .group-hover\:block {
   display: block;
 }
+
+@media (min-width: 768px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+
+  .md\:h-16 {
+    height: 64px;
+  }
+
+  .md\:h-14 {
+    height: 56px;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .md\:px-2 {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .md\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .md\:pt-0 {
+    padding-top: 0;
+  }
+
+  .md\:pr-0 {
+    padding-right: 0;
+  }
+
+  .md\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .md\:pl-4 {
+    padding-left: 16px;
+  }
+
+  .md\:pt-2 {
+    padding-top: 8px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:block {
+    display: block;
+  }
+}

package/src/components/Table/components/SearchInput/index.tsx

@@ -1,22 +0,0 @@
-import type { FunctionComponent } from 'react';
-import useSearchInput from './useSearchInput';
-
-export interface SearchInputProps {
-  onSearch: (search: string) => void;
-}
-
-const SearchInput: FunctionComponent<SearchInputProps> = function ({
-  onSearch,
-}) {
-  const { search, onChange, onSubmit } = useSearchInput(onSearch);
-
-  return (
-    <div className="flex flex-row gap-x-2">
-      <span>Search:</span>
-      <input type="text" value={search} onChange={onChange} />
-      <button onClick={onSubmit}>Search</button>
-    </div>
-  );
-};
-
-export default SearchInput;

package/src/components/Table/components/SearchInput/useSearchInput.ts

@@ -1,30 +0,0 @@
-import { FormEvent, useCallback, useState } from 'react';
-
-export interface SearchInputHook {
-  search: string;
-  onChange: (e: FormEvent<HTMLInputElement>) => void;
-  onSubmit: () => void;
-}
-
-export default function useSearchInput(
-  onSearch: (search: string) => void,
-): SearchInputHook {
-  const [search, setSearch] = useState('');
-
-  const onChange = useCallback(
-    (e: FormEvent<HTMLInputElement>) => {
-      setSearch(e.currentTarget.value);
-    },
-    [setSearch],
-  );
-
-  const onSubmit = useCallback(() => {
-    onSearch(search);
-  }, [search, onSearch]);
-
-  return {
-    search,
-    onChange,
-    onSubmit,
-  };
-}