@teppen/react-ui 0.0.19 → 0.2.0

package/README.md

@@ -1 +1,80 @@
-# @teppen/react-ui
+# React-UI (@teppen/)
+
+This is a React component library that provides some useful UI elements for your web applications.
+
+## Components
+
+This library includes the following components:
+
+- Table: A simple Table. (0.1.0 ～)
+
+## Installation
+
+You can install this library using npm or yarn.
+
+```bash
+npm i @teppen/react-ui
+```
+
+This library has the following peer dependencies:
+
+- react
+- react-dom
+
+### Tailwind CSS Installation and Setup
+
+Please follow the installation procedure described in the following tailwindcss website.
+
+- URL: https://tailwindcss.com/docs/installation/framework-guides
+
+To use the React-UI library, add a `content` in `tailwind.config.js` to `". /node_modules/@teppen/react-ui/dist/**/*.js"`.
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "<The path where you are placing the component files>",
+    "./node_modules/@teppen/react-ui/dist/**/*.js",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+```
+
+## Usage
+
+To use this library, you need to import the components you want to use and render them in your React application.
+
+For example, to use the Button component, you can do something like this:
+
+```tsx
+import React from "react";
+import { Table } from "@teppen/react-ui";
+
+const App = () => {
+  return (
+    <div>
+      <Table
+        rows={[
+          { id: "1", name: "Taro" },
+          { id: "2", name: "Yoshiko" },
+          { id: "3", name: "Koki" },
+          { id: "4", name: "Chisato" },
+        ]}
+        cols={[
+          { key: "id", label: "ID" },
+          { key: "name", label: "名前" },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+## License
+
+This library is licensed under MIT license. See LICENSE file for more information.

package/dist/cjs/src/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./table/base.js");exports.BaseTable=e;
+"use strict";var e=require("./table/base.js");exports.Table=e;
 //# sourceMappingURL=index.js.map

package/dist/cjs/src/table/base.js

@@ -1,3 +1,3 @@
 "use client";
-"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react/jsx-runtime"),t=require("react"),o=require("tailwind-variants").tv({slots:{frame:"table table-auto w-full",header:"bg-gray-200 text-gray-600",row:"hover:bg-gray-100",cell:"p-2 w-fit text-left cursor-default"},variants:{hover:{true:{row:"hover:cursor-pointer"}}}});module.exports=function(s){var a,n=function(r){var o=t.useState({key:"id",order:"ASC"}),s=o[0],a=o[1],n=r.cols,l=r.rows,i=e.__spreadArray([],l,!0).sort((function(e,r){return e[s.key]<r[s.key]?"ASC"===s.order?-1:1:e[s.key]>r[s.key]?"ASC"===s.order?1:-1:0}));return{cols:n.map((function(r){return e.__assign(e.__assign({},r),{onClick:function(e){e.preventDefault(),s.key===r.key?a({key:r.key,order:"ASC"===s.order?"DESC":"ASC"}):a({key:r.key,order:"ASC"})}})})),rows:i,sortKey:s.key,sortOrder:s.order}}(s),l=n.cols,i=n.rows,c=n.sortKey,d=n.sortOrder,u=o({hover:!!(null===(a=i[0])||void 0===a?void 0:a.onClick)});u.frame;var y=u.cell,k=u.row;return u.header,r.jsxs("table",{className:"table table-auto w-full",children:[r.jsx("thead",{className:"bg-gray-200 text-red-600",children:r.jsx("tr",{children:l.map((function(e){return r.jsxs("th",{className:y(),children:[e.label,r.jsx("button",{onClick:e.onClick,children:c===e.key?"ASC"===d?"▲":"▼":"△"})]},e.key)}))})}),r.jsx("tbody",{children:i.map((function(e){return r.jsx("tr",{className:k(),onClick:e.onClick,"data-testid":e.id,children:l.map((function(t){return r.jsx("td",{children:r.jsx("div",{className:y(),onClick:function(e){e.preventDefault(),e.stopPropagation()},children:e[t.key]})},t.key)}))},e.id)}))})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("./hook.js"),o=require("./cell.js"),l=require("./sort.js"),s=require("./header.js");module.exports=function(t){var d=r.useTable(t),n=d.cols,a=d.rows,i=d.sortKey,c=d.sortOrder;return e.jsx("div",{className:"w-full border border-gray-200 rounded-md overflow-hidden",children:e.jsxs("table",{className:"table table-auto w-full",children:[e.jsx("thead",{children:e.jsx("tr",{className:"border border-gray-200",children:n.map((function(r){return e.jsx(s.TableHeaderElement,{label:r.label,sortConponent:e.jsx(l.Sort,{onClick:r.onClick,isSortedByThis:i===r.key,sortOrder:c})},r.key)}))})}),e.jsx("tbody",{children:a.map((function(r){var l;return e.jsx("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(l=a[0])||void 0===l?void 0:l.onClick)?"hover:cursor-pointer":""),onClick:r.onClick,"data-testid":r.id,children:n.map((function(l){return e.jsx("td",{children:e.jsx(o.TableCell,{children:r[l.key]},l.key)},l.key)}))},r.id)}))})]})})};
 //# sourceMappingURL=base.js.map

package/dist/cjs/src/table/cell.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");exports.TableCell=function(t){return e.jsx("td",{children:e.jsx("div",{className:"p-2 w-fit text-left cursor-default",onClick:function(e){e.preventDefault(),e.stopPropagation()},children:t.children})})};
+//# sourceMappingURL=cell.js.map

package/dist/cjs/src/table/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["type TPropsCell = {\n  children: React.ReactNode;\n};\n\nexport function TableCell(props: TPropsCell) {\n  return (\n    <td>\n      <div\n        className={\"p-2 w-fit text-left cursor-default\"}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n      >\n        {props.children}\n      </div>\n    </td>\n  );\n}\n"],"names":["props","_jsx","children","jsx","className","onClick","e","preventDefault","stopPropagation"],"mappings":"kEAIM,SAAoBA,GACxB,OACEC,MACE,KAAA,CAAAC,SAAAD,EAAAE,IAAA,MAAA,CACEC,UAAW,qCACXC,QAAS,SAACC,GACRA,EAAEC,iBACFD,EAAEE,iBACH,WAEAR,EAAME,YAIf"}

package/dist/cjs/src/table/header.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");exports.TableHeaderElement=function(t){return e.jsxs("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[e.jsx("div",{className:"px-2",children:e.jsx("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[90%]",children:t.label})}),t.sortConponent&&e.jsx("div",{className:"absolute top-1/2 right-1 -translate-y-1/2",children:t.sortConponent})]})};
+//# sourceMappingURL=header.js.map

package/dist/cjs/src/table/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      <div className=\"px-2\">\n        <p className=\"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[90%]\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.sortConponent && (\n        <div className=\"absolute top-1/2 right-1 -translate-y-1/2\">\n          {props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["props","_jsxs","className","_jsx","jsx","children","label","sortConponent"],"mappings":"2EAKM,SAA6BA,GACjC,OACEC,EAAAA,KAAI,KAAA,CAAAC,UAAW,wDACbC,EAAKC,IAAA,MAAA,CAAAF,UAAU,gBACbC,EAAGC,IAAA,IAAA,CAAAF,UAAU,wEAAuEG,SACjFL,EAAMM,UAIVN,EAAMO,eACLJ,EAAAA,WAAKD,UAAU,4CAA2CG,SACvDL,EAAMO,kBAKjB"}

package/dist/cjs/src/table/hook.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),r=require("react");exports.useTable=function(o){var s=r.useState({key:"id",order:"ASC"}),t=s[0],n=s[1],u=o.cols,y=o.rows,i=e.__spreadArray([],y,!0).sort((function(e,r){return e[t.key]<r[t.key]?"ASC"===t.order?-1:1:e[t.key]>r[t.key]?"ASC"===t.order?1:-1:0}));return{cols:u.map((function(r){return e.__assign(e.__assign({},r),{onClick:function(e){e.preventDefault(),t.key===r.key?n({key:r.key,order:"ASC"===t.order?"DESC":"ASC"}):n({key:r.key,order:"ASC"})}})})),rows:i,sortKey:t.key,sortOrder:t.order}};
+//# sourceMappingURL=hook.js.map

package/dist/cjs/src/table/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { cols, rows } = props;\n\n  const sortedRows = [...rows].sort((a, b) => {\n    if (a[key.key] < b[key.key]) {\n      return key.order === \"ASC\" ? -1 : 1;\n    }\n    if (a[key.key] > b[key.key]) {\n      return key.order === \"ASC\" ? 1 : -1;\n    }\n    return 0;\n  });\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: sortedRows,\n    sortKey: key.key,\n    sortOrder: key.order,\n  };\n}\n"],"names":["props","_a","useState","key","order","changeKey","cols","rows","sortedRows","__spreadArray","sort","a","b","map","col","onClick","e","preventDefault","sortKey","sortOrder"],"mappings":"wGAQM,SAAyCA,GACvC,IAAAC,EAAmBC,EAAAA,SAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACJC,EAAeN,EAAKM,KAAdC,EAASP,EAAKO,KAEtBC,EAAaC,gBAAA,GAAIF,GAAI,GAAEG,MAAK,SAACC,EAAGC,GACpC,OAAID,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCO,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,IAiBA,MAAO,CACLE,KAhBmBA,EAAKO,KAAI,SAACC,GAAQ,gCAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEd,EAAIA,MAAQW,EAAIX,IAClBE,EAAU,CACRF,IAAKW,EAAIX,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKW,EAAIX,IAAKC,MAAO,OAErC,GACA,IAIAG,KAAMC,EACNU,QAASf,EAAIA,IACbgB,UAAWhB,EAAIC,MAEnB"}

package/dist/cjs/src/table/sort-icon.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),t=require("react").memo((function(t){var a=t.size||16,e=t.sortOrder||"ASC";return r.jsxs("div",{className:"relative",style:{width:"".concat(a,"px"),height:"".concat(a,"px")},children:[r.jsx("div",{className:"absolute top-1/2 right-0 w-[40%] h-[20%] duration-300 ".concat("ASC"===e?"-translate-y-[250%]":"translate-y-[150%]"," ").concat(t.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")}),r.jsx("div",{className:"absolute top-1/2 right-0 w-[70%] h-[20%] duration-300 -translate-y-1/2  ".concat(t.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")}),r.jsx("div",{className:"absolute top-1/2 right-0 w-full h-[20%] duration-300 ".concat("ASC"===e?"translate-y-[150%]":"-translate-y-[250%]","  ").concat(t.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")})]})}));exports.SortIcon=t;
+//# sourceMappingURL=sort-icon.js.map

package/dist/cjs/src/table/sort-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-icon.js","sources":["../../../../src/table/sort-icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\ntype TPropsSortIcon = {\n  sortOrder?: \"ASC\" | \"DESC\";\n  isSortActive?: boolean;\n  size?: number;\n};\n\nconst SortIcon = memo(function SI(props: TPropsSortIcon) {\n  const size = props.size || 16;\n  const order = props.sortOrder || \"ASC\";\n\n  return (\n    <div\n      className=\"relative\"\n      style={{ width: `${size}px`, height: `${size}px` }}\n    >\n      <div\n        className={`absolute top-1/2 right-0 w-[40%] h-[20%] duration-300 ${\n          order === \"ASC\" ? \"-translate-y-[250%]\" : \"translate-y-[150%]\"\n        } ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n      <div\n        className={`absolute top-1/2 right-0 w-[70%] h-[20%] duration-300 -translate-y-1/2  ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n      <div\n        className={`absolute top-1/2 right-0 w-full h-[20%] duration-300 ${\n          order === \"ASC\" ? \"translate-y-[150%]\" : \"-translate-y-[250%]\"\n        }  ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n    </div>\n  );\n});\n\nexport { SortIcon };\n"],"names":["SortIcon","memo","props","size","order","sortOrder","_jsxs","className","style","width","height","children","_jsx","concat","isSortActive"],"mappings":"gDAQMA,mBAAeC,MAAC,SAAYC,GAChC,IAAMC,EAAOD,EAAMC,MAAQ,GACrBC,EAAQF,EAAMG,WAAa,MAEjC,OACEC,EAAAA,KACE,MAAA,CAAAC,UAAU,WACVC,MAAO,CAAEC,MAAO,UAAGN,EAAI,MAAMO,OAAQ,UAAGP,EAAI,OAAMQ,SAAA,CAElDC,EAAAA,WACEL,UAAW,gEACC,QAAVH,EAAkB,sBAAwB,qBAE1C,KAAAS,OAAAX,EAAMY,aACF,cACA,wCAGRF,EAAAA,IACE,MAAA,CAAAL,UAAW,2EAAAM,OACTX,EAAMY,aACF,cACA,wCAGRF,EAAAA,IACE,MAAA,CAAAL,UAAW,wDAAAM,OACC,QAAVT,EAAkB,qBAAuB,sBAAqB,MAAAS,OAE9DX,EAAMY,aACF,cACA,0CAKd"}

package/dist/cjs/src/table/sort.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime"),s=require("./sort-icon.js");exports.Sort=function(e){return r.jsx("div",{onClick:e.onClick,className:"cursor-pointer",children:r.jsx(s.SortIcon,{sortOrder:e.isSortedByThis?e.sortOrder:"ASC",isSortActive:e.isSortedByThis})})};
+//# sourceMappingURL=sort.js.map

package/dist/cjs/src/table/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sources":["../../../../src/table/sort.tsx"],"sourcesContent":["import { SortIcon } from \"./sort-icon\";\n\ntype TPropsSort = {\n  onClick: (e: React.MouseEvent<HTMLDivElement>) => void;\n  isSortedByThis: boolean;\n  sortOrder: \"ASC\" | \"DESC\";\n};\n\nexport function Sort(props: TPropsSort) {\n  return (\n    <div onClick={props.onClick} className=\"cursor-pointer\">\n      <SortIcon\n        sortOrder={props.isSortedByThis ? props.sortOrder : \"ASC\"}\n        isSortActive={props.isSortedByThis}\n      />\n    </div>\n  );\n}\n"],"names":["props","_jsx","onClick","className","children","SortIcon","sortOrder","isSortedByThis","isSortActive"],"mappings":"yFAQM,SAAeA,GACnB,OACEC,MAAK,MAAA,CAAAC,QAASF,EAAME,QAASC,UAAU,iBACrCC,SAAAH,EAAAA,IAACI,EAAQA,SACP,CAAAC,UAAWN,EAAMO,eAAiBP,EAAMM,UAAY,MACpDE,aAAcR,EAAMO,kBAI5B"}

package/dist/esm/src/index.js

@@ -1,2 +1,2 @@
-export{default as BaseTable}from"./table/base.js";
+export{default as Table}from"./table/base.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/src/table/base.js

@@ -1,3 +1,3 @@
 "use client";
-import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{tv as a}from"tailwind-variants";var l=a({slots:{frame:"table table-auto w-full",header:"bg-gray-200 text-gray-600",row:"hover:bg-gray-100",cell:"p-2 w-fit text-left cursor-default"},variants:{hover:{true:{row:"hover:cursor-pointer"}}}});function i(a){var i,c=function(t){var o=n({key:"id",order:"ASC"}),a=o[0],l=o[1],i=t.cols,c=t.rows,d=r([],c,!0).sort((function(r,e){return r[a.key]<e[a.key]?"ASC"===a.order?-1:1:r[a.key]>e[a.key]?"ASC"===a.order?1:-1:0}));return{cols:i.map((function(r){return e(e({},r),{onClick:function(e){e.preventDefault(),a.key===r.key?l({key:r.key,order:"ASC"===a.order?"DESC":"ASC"}):l({key:r.key,order:"ASC"})}})})),rows:d,sortKey:a.key,sortOrder:a.order}}(a),d=c.cols,s=c.rows,u=c.sortKey,f=c.sortOrder,k=l({hover:!!(null===(i=s[0])||void 0===i?void 0:i.onClick)});k.frame;var y=k.cell,m=k.row;return k.header,t("table",{className:"table table-auto w-full",children:[o("thead",{className:"bg-gray-200 text-red-600",children:o("tr",{children:d.map((function(r){return t("th",{className:y(),children:[r.label,o("button",{onClick:r.onClick,children:u===r.key?"ASC"===f?"▲":"▼":"△"})]},r.key)}))})}),o("tbody",{children:s.map((function(r){return o("tr",{className:m(),onClick:r.onClick,"data-testid":r.id,children:d.map((function(e){return o("td",{children:o("div",{className:y(),onClick:function(r){r.preventDefault(),r.stopPropagation()},children:r[e.key]})},e.key)}))},r.id)}))})]})}export{i as default};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useTable as o}from"./hook.js";import{TableCell as t}from"./cell.js";import{Sort as l}from"./sort.js";import{TableHeaderElement as d}from"./header.js";function n(n){var i=o(n),a=i.cols,c=i.rows,s=i.sortKey,m=i.sortOrder;return r("div",{className:"w-full border border-gray-200 rounded-md overflow-hidden",children:e("table",{className:"table table-auto w-full",children:[r("thead",{children:r("tr",{className:"border border-gray-200",children:a.map((function(e){return r(d,{label:e.label,sortConponent:r(l,{onClick:e.onClick,isSortedByThis:s===e.key,sortOrder:m})},e.key)}))})}),r("tbody",{children:c.map((function(e){var o;return r("tr",{className:"border border-gray-200 hover:bg-gray-100 ".concat((null===(o=c[0])||void 0===o?void 0:o.onClick)?"hover:cursor-pointer":""),onClick:e.onClick,"data-testid":e.id,children:a.map((function(o){return r("td",{children:r(t,{children:e[o.key]},o.key)},o.key)}))},e.id)}))})]})})}export{n as default};
 //# sourceMappingURL=base.js.map

package/dist/esm/src/table/cell.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";function e(e){return t("td",{children:t("div",{className:"p-2 w-fit text-left cursor-default",onClick:function(t){t.preventDefault(),t.stopPropagation()},children:e.children})})}export{e as TableCell};
+//# sourceMappingURL=cell.js.map

package/dist/esm/src/table/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","sources":["../../../../src/table/cell.tsx"],"sourcesContent":["type TPropsCell = {\n  children: React.ReactNode;\n};\n\nexport function TableCell(props: TPropsCell) {\n  return (\n    <td>\n      <div\n        className={\"p-2 w-fit text-left cursor-default\"}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n      >\n        {props.children}\n      </div>\n    </td>\n  );\n}\n"],"names":["TableCell","props","_jsx","children","className","onClick","e","preventDefault","stopPropagation"],"mappings":"wCAIM,SAAUA,EAAUC,GACxB,OACEC,EACE,KAAA,CAAAC,SAAAD,EAAA,MAAA,CACEE,UAAW,qCACXC,QAAS,SAACC,GACRA,EAAEC,iBACFD,EAAEE,iBACH,WAEAP,EAAME,YAIf"}

package/dist/esm/src/table/header.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";function r(r){return e("th",{className:"relative bg-gray-200 text-gray-600 h-[32px]",children:[t("div",{className:"px-2",children:t("p",{className:"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[90%]",children:r.label})}),r.sortConponent&&t("div",{className:"absolute top-1/2 right-1 -translate-y-1/2",children:r.sortConponent})]})}export{r as TableHeaderElement};
+//# sourceMappingURL=header.js.map

package/dist/esm/src/table/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/table/header.tsx"],"sourcesContent":["type TPropsTableHeader = {\n  label?: string;\n  sortConponent?: JSX.Element;\n};\n\nexport function TableHeaderElement(props: TPropsTableHeader) {\n  return (\n    <th className={`relative bg-gray-200 text-gray-600 h-[32px]`}>\n      <div className=\"px-2\">\n        <p className=\"text-left font-bold text-nowrap overflow-hidden text-ellipsis w-[90%]\">\n          {props.label}\n        </p>\n      </div>\n\n      {props.sortConponent && (\n        <div className=\"absolute top-1/2 right-1 -translate-y-1/2\">\n          {props.sortConponent}\n        </div>\n      )}\n    </th>\n  );\n}\n"],"names":["TableHeaderElement","props","_jsxs","className","_jsx","children","label","sortConponent"],"mappings":"kDAKM,SAAUA,EAAmBC,GACjC,OACEC,EAAI,KAAA,CAAAC,UAAW,wDACbC,EAAK,MAAA,CAAAD,UAAU,gBACbC,EAAG,IAAA,CAAAD,UAAU,wEAAuEE,SACjFJ,EAAMK,UAIVL,EAAMM,eACLH,SAAKD,UAAU,4CAA2CE,SACvDJ,EAAMM,kBAKjB"}

package/dist/esm/src/table/hook.js

@@ -0,0 +1,2 @@
+import{__spreadArray as r,__assign as e}from"../../node_modules/tslib/tslib.es6.js";import{useState as o}from"react";function t(t){var n=o({key:"id",order:"ASC"}),k=n[0],y=n[1],s=t.cols,d=t.rows,i=r([],d,!0).sort((function(r,e){return r[k.key]<e[k.key]?"ASC"===k.order?-1:1:r[k.key]>e[k.key]?"ASC"===k.order?1:-1:0}));return{cols:s.map((function(r){return e(e({},r),{onClick:function(e){e.preventDefault(),k.key===r.key?y({key:r.key,order:"ASC"===k.order?"DESC":"ASC"}):y({key:r.key,order:"ASC"})}})})),rows:i,sortKey:k.key,sortOrder:k.order}}export{t as useTable};
+//# sourceMappingURL=hook.js.map

package/dist/esm/src/table/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sources":["../../../../src/table/hook.ts"],"sourcesContent":["import { useState } from \"react\";\nimport { DataObject, TPropsTable } from \"./type\";\n\ntype State = {\n  key: string;\n  order: \"ASC\" | \"DESC\";\n};\n\nexport function useTable<T extends DataObject>(props: TPropsTable<T>) {\n  const [key, changeKey] = useState<State>({ key: \"id\", order: \"ASC\" });\n  const { cols, rows } = props;\n\n  const sortedRows = [...rows].sort((a, b) => {\n    if (a[key.key] < b[key.key]) {\n      return key.order === \"ASC\" ? -1 : 1;\n    }\n    if (a[key.key] > b[key.key]) {\n      return key.order === \"ASC\" ? 1 : -1;\n    }\n    return 0;\n  });\n\n  const colsWithSort = cols.map((col) => ({\n    ...col,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      e.preventDefault();\n      if (key.key === col.key) {\n        changeKey({\n          key: col.key,\n          order: key.order === \"ASC\" ? \"DESC\" : \"ASC\",\n        });\n      } else {\n        changeKey({ key: col.key, order: \"ASC\" });\n      }\n    },\n  }));\n\n  return {\n    cols: colsWithSort,\n    rows: sortedRows,\n    sortKey: key.key,\n    sortOrder: key.order,\n  };\n}\n"],"names":["useTable","props","_a","useState","key","order","changeKey","cols","rows","sortedRows","__spreadArray","sort","a","b","map","col","onClick","e","preventDefault","sortKey","sortOrder"],"mappings":"qHAQM,SAAUA,EAA+BC,GACvC,IAAAC,EAAmBC,EAAgB,CAAEC,IAAK,KAAMC,MAAO,QAAtDD,OAAKE,OACJC,EAAeN,EAAKM,KAAdC,EAASP,EAAKO,KAEtBC,EAAaC,EAAA,GAAIF,GAAI,GAAEG,MAAK,SAACC,EAAGC,GACpC,OAAID,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,OAAmB,EAAI,EAEhCO,EAAER,EAAIA,KAAOS,EAAET,EAAIA,KACA,QAAdA,EAAIC,MAAkB,GAAK,EAE7B,CACT,IAiBA,MAAO,CACLE,KAhBmBA,EAAKO,KAAI,SAACC,GAAQ,cAClCA,GAAG,CACNC,QAAS,SAACC,GACRA,EAAEC,iBACEd,EAAIA,MAAQW,EAAIX,IAClBE,EAAU,CACRF,IAAKW,EAAIX,IACTC,MAAqB,QAAdD,EAAIC,MAAkB,OAAS,QAGxCC,EAAU,CAAEF,IAAKW,EAAIX,IAAKC,MAAO,OAErC,GACA,IAIAG,KAAMC,EACNU,QAASf,EAAIA,IACbgB,UAAWhB,EAAIC,MAEnB"}

package/dist/esm/src/table/sort-icon.js

@@ -0,0 +1,2 @@
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import{memo as a}from"react";var e=a((function(a){var e=a.size||16,o=a.sortOrder||"ASC";return r("div",{className:"relative",style:{width:"".concat(e,"px"),height:"".concat(e,"px")},children:[t("div",{className:"absolute top-1/2 right-0 w-[40%] h-[20%] duration-300 ".concat("ASC"===o?"-translate-y-[250%]":"translate-y-[150%]"," ").concat(a.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")}),t("div",{className:"absolute top-1/2 right-0 w-[70%] h-[20%] duration-300 -translate-y-1/2  ".concat(a.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")}),t("div",{className:"absolute top-1/2 right-0 w-full h-[20%] duration-300 ".concat("ASC"===o?"translate-y-[150%]":"-translate-y-[250%]","  ").concat(a.isSortActive?"bg-gray-700":"bg-gray-200 border border-gray-500")})]})}));export{e as SortIcon};
+//# sourceMappingURL=sort-icon.js.map

package/dist/esm/src/table/sort-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-icon.js","sources":["../../../../src/table/sort-icon.tsx"],"sourcesContent":["import { memo } from \"react\";\n\ntype TPropsSortIcon = {\n  sortOrder?: \"ASC\" | \"DESC\";\n  isSortActive?: boolean;\n  size?: number;\n};\n\nconst SortIcon = memo(function SI(props: TPropsSortIcon) {\n  const size = props.size || 16;\n  const order = props.sortOrder || \"ASC\";\n\n  return (\n    <div\n      className=\"relative\"\n      style={{ width: `${size}px`, height: `${size}px` }}\n    >\n      <div\n        className={`absolute top-1/2 right-0 w-[40%] h-[20%] duration-300 ${\n          order === \"ASC\" ? \"-translate-y-[250%]\" : \"translate-y-[150%]\"\n        } ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n      <div\n        className={`absolute top-1/2 right-0 w-[70%] h-[20%] duration-300 -translate-y-1/2  ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n      <div\n        className={`absolute top-1/2 right-0 w-full h-[20%] duration-300 ${\n          order === \"ASC\" ? \"translate-y-[150%]\" : \"-translate-y-[250%]\"\n        }  ${\n          props.isSortActive\n            ? \"bg-gray-700\"\n            : \"bg-gray-200 border border-gray-500\"\n        }`}\n      ></div>\n    </div>\n  );\n});\n\nexport { SortIcon };\n"],"names":["SortIcon","memo","props","size","order","sortOrder","_jsxs","className","style","width","height","children","_jsx","concat","isSortActive"],"mappings":"+EAQA,IAAMA,EAAWC,GAAK,SAAYC,GAChC,IAAMC,EAAOD,EAAMC,MAAQ,GACrBC,EAAQF,EAAMG,WAAa,MAEjC,OACEC,EACE,MAAA,CAAAC,UAAU,WACVC,MAAO,CAAEC,MAAO,UAAGN,EAAI,MAAMO,OAAQ,UAAGP,EAAI,OAAMQ,SAAA,CAElDC,SACEL,UAAW,gEACC,QAAVH,EAAkB,sBAAwB,qBAE1C,KAAAS,OAAAX,EAAMY,aACF,cACA,wCAGRF,EACE,MAAA,CAAAL,UAAW,2EAAAM,OACTX,EAAMY,aACF,cACA,wCAGRF,EACE,MAAA,CAAAL,UAAW,wDAAAM,OACC,QAAVT,EAAkB,qBAAuB,sBAAqB,MAAAS,OAE9DX,EAAMY,aACF,cACA,0CAKd"}

package/dist/esm/src/table/sort.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";import{SortIcon as o}from"./sort-icon.js";function i(i){return r("div",{onClick:i.onClick,className:"cursor-pointer",children:r(o,{sortOrder:i.isSortedByThis?i.sortOrder:"ASC",isSortActive:i.isSortedByThis})})}export{i as Sort};
+//# sourceMappingURL=sort.js.map

package/dist/esm/src/table/sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort.js","sources":["../../../../src/table/sort.tsx"],"sourcesContent":["import { SortIcon } from \"./sort-icon\";\n\ntype TPropsSort = {\n  onClick: (e: React.MouseEvent<HTMLDivElement>) => void;\n  isSortedByThis: boolean;\n  sortOrder: \"ASC\" | \"DESC\";\n};\n\nexport function Sort(props: TPropsSort) {\n  return (\n    <div onClick={props.onClick} className=\"cursor-pointer\">\n      <SortIcon\n        sortOrder={props.isSortedByThis ? props.sortOrder : \"ASC\"}\n        isSortActive={props.isSortedByThis}\n      />\n    </div>\n  );\n}\n"],"names":["Sort","props","_jsx","onClick","className","children","SortIcon","sortOrder","isSortedByThis","isSortActive"],"mappings":"kFAQM,SAAUA,EAAKC,GACnB,OACEC,EAAK,MAAA,CAAAC,QAASF,EAAME,QAASC,UAAU,iBACrCC,SAAAH,EAACI,EACC,CAAAC,UAAWN,EAAMO,eAAiBP,EAAMM,UAAY,MACpDE,aAAcR,EAAMO,kBAI5B"}

package/dist/index.d.ts

@@ -12,6 +12,7 @@ type TPropsTable<T extends DataObject> = {
     }[];
     rows: T[];
 };
-declare function BaseTable<T extends DataObject>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
 
-export { BaseTable };
+declare function Table<T extends DataObject>(props: TPropsTable<T>): react_jsx_runtime.JSX.Element;
+
+export { Table };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teppen/react-ui",
-  "version": "0.0.19",
+  "version": "0.2.0",
   "description": "React UI Component",
   "main": "dist/cjs/src/index.js",
   "module": "dist/esm/src/index.js",
@@ -49,10 +49,10 @@
     "storybook": "^7.6.17",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
+    "tailwind-variants": "^0.2.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "tailwind-variants": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },