@teppen/react-ui 0.0.4 → 0.0.10

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");exports.BaseTable=function(t){var a=t.cols,r=t.rows;return e.jsxs("table",{className:"table table-auto w-full",children:[e.jsx("thead",{className:"bg-gray-200 text-gray-600",children:e.jsx("tr",{"data-testid":"table-header",children:a.map((function(t){return e.jsx("th",{className:"",children:t.label},t.key)}))})}),e.jsx("tbody",{children:r.map((function(t){return e.jsx("tr",{"data-testid":t.id,className:"hover:bg-gray-100",onClick:t.onClick,children:a.map((function(a){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[a.key]})},a.key)}))},t.id)}))})]})};
+"use strict";var t=require("react/jsx-runtime");!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}('/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.table{display:table}.w-96{width:24rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.table-auto{table-layout:auto}.cursor-default{cursor:default}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-left{text-align:left}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\\:cursor-pointer:hover{cursor:pointer}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}',{insertAt:"top"});exports.BaseTable=function(e){var o,r=e.cols,i=e.rows,a=(null===(o=i[0])||void 0===o||o.onClick,{frame:function(){return"table table-auto w-full"},header:function(){return"bg-gray-200 text-gray-600"},row:function(){return"hover:bg-gray-100"},cell:function(){return"p-2 w-fit text-left cursor-default"}}),n=a.frame,s=a.cell,l=a.row,c=a.header;return t.jsxs("table",{className:n(),children:[t.jsx("thead",{className:c(),children:t.jsx("tr",{children:r.map((function(e){return t.jsx("th",{className:s(),children:e.label},e.key)}))})}),t.jsx("tbody",{children:i.map((function(e){return t.jsx("tr",{className:l(),onClick:e.onClick,"data-testid":e.id,children:r.map((function(o){return t.jsx("td",{children:t.jsx("div",{className:s(),onClick:function(t){t.preventDefault(),t.stopPropagation()},children:e[o.key]})},o.key)}))},e.id)}))})]})};
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/table/base.tsx"],"sourcesContent":["type DataObject = {\n  [key: string]: any;\n  id: number | string;\n  onClick?: React.MouseEventHandler<HTMLTableRowElement>;\n};\n\ntype TPropsTable<T extends DataObject> = {\n  cols: { key: string; label?: string }[];\n  rows: T[];\n};\n\nexport default function BaseTable<T extends DataObject>(props: TPropsTable<T>) {\n  const { cols, rows } = props;\n\n  return (\n    <table className={`table table-auto w-full`}>\n      <thead className={`bg-gray-200 text-gray-600`}>\n        <tr data-testid=\"table-header\">\n          {cols.map((col) => (\n            <th key={col.key} className={``}>\n              {col.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r) => (\n          <tr\n            key={r.id}\n            data-testid={r.id}\n            className={`hover:bg-gray-100`}\n            onClick={r.onClick}\n          >\n            {cols.map((col) => (\n              <td key={col.key}>\n                <div\n                  className={`p-2 w-fit text-left cursor-default`}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                >\n                  {r[col.key]}\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"names":["props","cols","rows","_jsxs","className","children","_jsx","map","col","label","key","jsx","r","id","onClick","e","preventDefault","stopPropagation"],"mappings":"kEAWwB,SAAgCA,GAC9C,IAAAC,EAAeD,EAAKC,KAAdC,EAASF,EAAKE,KAE5B,OACEC,EAAAA,KAAO,QAAA,CAAAC,UAAW,0BAAyBC,SAAA,CACzCC,eAAOF,UAAW,4BAA2BC,SAC3CC,EAAAA,wBAAgB,eAAcD,SAC3BJ,EAAKM,KAAI,SAACC,GAAQ,OACjBF,EAAAA,IAAkB,KAAA,CAAAF,UAAW,GAAEC,SAC5BG,EAAIC,OADED,EAAIE,IAGd,QAGLJ,EACGK,IAAA,QAAA,CAAAN,SAAAH,EAAKK,KAAI,SAACK,GAAM,OACfN,EAAAK,IAAA,KAAA,CAAA,cAEeC,EAAEC,GACfT,UAAW,oBACXU,QAASF,EAAEE,iBAEVb,EAAKM,KAAI,SAACC,GAAQ,OACjBF,EAAAA,IACE,KAAA,CAAAD,SAAAC,EAAAA,IAAA,MAAA,CACEF,UAAW,qCACXU,QAAS,SAACC,GACRA,EAAEC,iBACFD,EAAEE,iBACJ,EAECZ,SAAAO,EAAEJ,EAAIE,QARFF,EAAIE,IADI,KALdE,EAAEC,GAmBV,QAIT"}
+{"version":3,"file":"index.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../../src/table/base.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { tv } from \"tailwind-variants\";\n\ntype DataObject = {\n  [key: string]: any;\n  id: number | string;\n  onClick?: React.MouseEventHandler<HTMLTableRowElement>;\n};\n\ntype TPropsTable<T extends DataObject> = {\n  cols: { key: string; label?: string }[];\n  rows: T[];\n};\n\n// const tvTableDesign = tv({\n//   slots: {\n//     frame: \"table table-auto w-full\",\n//     header: \"bg-gray-200 text-gray-600\",\n//     row: \"hover:bg-gray-100\",\n//     cell: \"p-2 w-fit text-left cursor-default\",\n//   },\n//   variants: {\n//     hover: {\n//       true: {\n//         row: \"hover:cursor-pointer\",\n//       },\n//     },\n//   },\n// });\n\nconst tvTableDesign = (t: { hover: any }) => ({\n  frame: () => \"table table-auto w-full\",\n  header: () => \"bg-gray-200 text-gray-600\",\n  row: () => \"hover:bg-gray-100\",\n  cell: () => \"p-2 w-fit text-left cursor-default\",\n});\n\nexport default function BaseTable<T extends DataObject>(props: TPropsTable<T>) {\n  const { cols, rows } = props;\n  const { frame, cell, row, header } = tvTableDesign({\n    hover: !!rows[0]?.onClick,\n  });\n  return (\n    <table className={frame()}>\n      <thead className={header()}>\n        <tr>\n          {cols.map((col) => (\n            <th key={col.key} className={cell()}>\n              {col.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r) => (\n          <tr\n            key={r.id}\n            className={row()}\n            onClick={r.onClick}\n            data-testid={r.id}\n          >\n            {cols.map((col) => (\n              <td key={col.key}>\n                <div\n                  className={cell()}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                >\n                  {r[col.key]}\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","props","cols","rows","_b","_a","onClick","frame","header","row","cell","_jsxs","className","_jsx","jsx","children","map","col","label","key","r","id","e","preventDefault","stopPropagation"],"mappings":"iDAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D,47JCWwB,SAAgCe,SAC9CC,EAAeD,EAAKC,KAAdC,EAASF,EAAKE,KACtBC,GACc,QAATC,EAAAF,EAAK,UAAI,IAAAE,GAAAA,EAAAC,QAVwB,CAC5CC,MAAO,WAAM,MAAA,yBAAyB,EACtCC,OAAQ,WAAM,MAAA,2BAA2B,EACzCC,IAAK,WAAM,MAAA,mBAAmB,EAC9BC,KAAM,WAAM,MAAA,oCAAoC,IAKxCH,EAAKH,EAAAG,MAAEG,EAAIN,EAAAM,KAAED,EAAGL,EAAAK,IAAED,EAAMJ,EAAAI,OAGhC,OACEG,EAAAA,KAAO,QAAA,CAAAC,UAAWL,cAChBM,EAAOC,IAAA,QAAA,CAAAF,UAAWJ,aAChBK,EAAAA,IACG,KAAA,CAAAE,SAAAb,EAAKc,KAAI,SAACC,GAAQ,OACjBJ,EAAAA,UAAkBD,UAAWF,IAAMK,SAChCE,EAAIC,OADED,EAAIE,YAMnBN,EAAAA,IACG,QAAA,CAAAE,SAAAZ,EAAKa,KAAI,SAACI,GAAM,OACfP,EAAAA,IAAA,KAAA,CAEED,UAAWH,IACXH,QAASc,EAAEd,QACE,cAAAc,EAAEC,GAAEN,SAEhBb,EAAKc,KAAI,SAACC,GAAQ,OACjBJ,EAAAA,mBACEA,EAAAA,IACE,MAAA,CAAAD,UAAWF,IACXJ,QAAS,SAACgB,GACRA,EAAEC,iBACFD,EAAEE,iBACJ,EAECT,SAAAK,EAAEH,EAAIE,QARFF,EAAIE,IADI,KALdC,EAAEC,GAmBV,QAIT","x_google_ignoreList":[0]}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";function a(a){var r=a.cols,l=a.rows;return e("table",{className:"table table-auto w-full",children:[t("thead",{className:"bg-gray-200 text-gray-600",children:t("tr",{"data-testid":"table-header",children:r.map((function(e){return t("th",{className:"",children:e.label},e.key)}))})}),t("tbody",{children:l.map((function(e){return t("tr",{"data-testid":e.id,className:"hover:bg-gray-100",onClick:e.onClick,children:r.map((function(a){return t("td",{children:t("div",{className:"p-2 w-fit text-left cursor-default",onClick:function(e){e.preventDefault(),e.stopPropagation()},children:e[a.key]})},a.key)}))},e.id)}))})]})}export{a as BaseTable};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";!function(t,e){void 0===e&&(e={});var o=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}('/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.table{display:table}.w-96{width:24rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.table-auto{table-layout:auto}.cursor-default{cursor:default}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-left{text-align:left}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\\:cursor-pointer:hover{cursor:pointer}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}',{insertAt:"top"});function o(o){var r,i=o.cols,a=o.rows,n=(null===(r=a[0])||void 0===r||r.onClick,{frame:function(){return"table table-auto w-full"},header:function(){return"bg-gray-200 text-gray-600"},row:function(){return"hover:bg-gray-100"},cell:function(){return"p-2 w-fit text-left cursor-default"}}),s=n.cell,l=n.row,c=n.header;return t("table",{className:(0,n.frame)(),children:[e("thead",{className:c(),children:e("tr",{children:i.map((function(t){return e("th",{className:s(),children:t.label},t.key)}))})}),e("tbody",{children:a.map((function(t){return e("tr",{className:l(),onClick:t.onClick,"data-testid":t.id,children:i.map((function(o){return e("td",{children:e("div",{className:s(),onClick:function(t){t.preventDefault(),t.stopPropagation()},children:t[o.key]})},o.key)}))},t.id)}))})]})}export{o as BaseTable};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/table/base.tsx"],"sourcesContent":["type DataObject = {\n  [key: string]: any;\n  id: number | string;\n  onClick?: React.MouseEventHandler<HTMLTableRowElement>;\n};\n\ntype TPropsTable<T extends DataObject> = {\n  cols: { key: string; label?: string }[];\n  rows: T[];\n};\n\nexport default function BaseTable<T extends DataObject>(props: TPropsTable<T>) {\n  const { cols, rows } = props;\n\n  return (\n    <table className={`table table-auto w-full`}>\n      <thead className={`bg-gray-200 text-gray-600`}>\n        <tr data-testid=\"table-header\">\n          {cols.map((col) => (\n            <th key={col.key} className={``}>\n              {col.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r) => (\n          <tr\n            key={r.id}\n            data-testid={r.id}\n            className={`hover:bg-gray-100`}\n            onClick={r.onClick}\n          >\n            {cols.map((col) => (\n              <td key={col.key}>\n                <div\n                  className={`p-2 w-fit text-left cursor-default`}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                >\n                  {r[col.key]}\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"names":["BaseTable","props","cols","rows","_jsxs","className","children","_jsx","map","col","label","key","r","id","onClick","e","preventDefault","stopPropagation"],"mappings":"kDAWwB,SAAAA,EAAgCC,GAC9C,IAAAC,EAAeD,EAAKC,KAAdC,EAASF,EAAKE,KAE5B,OACEC,EAAO,QAAA,CAAAC,UAAW,0BAAyBC,SAAA,CACzCC,WAAOF,UAAW,4BAA2BC,SAC3CC,sBAAgB,eAAcD,SAC3BJ,EAAKM,KAAI,SAACC,GAAQ,OACjBF,EAAkB,KAAA,CAAAF,UAAW,GAAEC,SAC5BG,EAAIC,OADED,EAAIE,IAGd,QAGLJ,EACG,QAAA,CAAAD,SAAAH,EAAKK,KAAI,SAACI,GAAM,OACfL,EAAA,KAAA,CAAA,cAEeK,EAAEC,GACfR,UAAW,oBACXS,QAASF,EAAEE,iBAEVZ,EAAKM,KAAI,SAACC,GAAQ,OACjBF,EACE,KAAA,CAAAD,SAAAC,EAAA,MAAA,CACEF,UAAW,qCACXS,QAAS,SAACC,GACRA,EAAEC,iBACFD,EAAEE,iBACJ,EAECX,SAAAM,EAAEH,EAAIE,QARFF,EAAIE,IADI,KALdC,EAAEC,GAmBV,QAIT"}
+{"version":3,"file":"index.js","sources":["../../node_modules/style-inject/dist/style-inject.es.js","../../src/table/base.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import { tv } from \"tailwind-variants\";\n\ntype DataObject = {\n  [key: string]: any;\n  id: number | string;\n  onClick?: React.MouseEventHandler<HTMLTableRowElement>;\n};\n\ntype TPropsTable<T extends DataObject> = {\n  cols: { key: string; label?: string }[];\n  rows: T[];\n};\n\n// const tvTableDesign = tv({\n//   slots: {\n//     frame: \"table table-auto w-full\",\n//     header: \"bg-gray-200 text-gray-600\",\n//     row: \"hover:bg-gray-100\",\n//     cell: \"p-2 w-fit text-left cursor-default\",\n//   },\n//   variants: {\n//     hover: {\n//       true: {\n//         row: \"hover:cursor-pointer\",\n//       },\n//     },\n//   },\n// });\n\nconst tvTableDesign = (t: { hover: any }) => ({\n  frame: () => \"table table-auto w-full\",\n  header: () => \"bg-gray-200 text-gray-600\",\n  row: () => \"hover:bg-gray-100\",\n  cell: () => \"p-2 w-fit text-left cursor-default\",\n});\n\nexport default function BaseTable<T extends DataObject>(props: TPropsTable<T>) {\n  const { cols, rows } = props;\n  const { frame, cell, row, header } = tvTableDesign({\n    hover: !!rows[0]?.onClick,\n  });\n  return (\n    <table className={frame()}>\n      <thead className={header()}>\n        <tr>\n          {cols.map((col) => (\n            <th key={col.key} className={cell()}>\n              {col.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((r) => (\n          <tr\n            key={r.id}\n            className={row()}\n            onClick={r.onClick}\n            data-testid={r.id}\n          >\n            {cols.map((col) => (\n              <td key={col.key}>\n                <div\n                  className={cell()}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                  }}\n                >\n                  {r[col.key]}\n                </div>\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"],"names":["css","ref","insertAt","document","head","getElementsByTagName","style","createElement","type","firstChild","insertBefore","appendChild","styleSheet","cssText","createTextNode","BaseTable","props","cols","rows","_b","_a","onClick","frame","header","row","cell","_jsxs","className","_jsx","children","map","col","label","key","r","id","e","preventDefault","stopPropagation"],"mappings":"mDAAA,SAAqBA,EAAKC,QACX,IAARA,IAAiBA,EAAM,CAAA,GAC5B,IAAIC,EAAWD,EAAIC,SAEnB,GAAKF,GAA2B,oBAAbG,SAAnB,CAEA,IAAIC,EAAOD,SAASC,MAAQD,SAASE,qBAAqB,QAAQ,GAC9DC,EAAQH,SAASI,cAAc,SACnCD,EAAME,KAAO,WAEI,QAAbN,GACEE,EAAKK,WACPL,EAAKM,aAAaJ,EAAOF,EAAKK,YAKhCL,EAAKO,YAAYL,GAGfA,EAAMM,WACRN,EAAMM,WAAWC,QAAUb,EAE3BM,EAAMK,YAAYR,SAASW,eAAed,GAnBY,CAqB1D,06JCWwB,SAAAe,EAAgCC,SAC9CC,EAAeD,EAAKC,KAAdC,EAASF,EAAKE,KACtBC,GACc,QAATC,EAAAF,EAAK,UAAI,IAAAE,GAAAA,EAAAC,QAVwB,CAC5CC,MAAO,WAAM,MAAA,yBAAyB,EACtCC,OAAQ,WAAM,MAAA,2BAA2B,EACzCC,IAAK,WAAM,MAAA,mBAAmB,EAC9BC,KAAM,WAAM,MAAA,oCAAoC,IAKjCA,EAAIN,EAAAM,KAAED,EAAGL,EAAAK,IAAED,EAAMJ,EAAAI,OAGhC,OACEG,EAAO,QAAA,CAAAC,WAAWL,EAJPH,EAAAG,mBAKTM,EAAO,QAAA,CAAAD,UAAWJ,aAChBK,EACG,KAAA,CAAAC,SAAAZ,EAAKa,KAAI,SAACC,GAAQ,OACjBH,QAAkBD,UAAWF,IAAMI,SAChCE,EAAIC,OADED,EAAIE,YAMnBL,EACG,QAAA,CAAAC,SAAAX,EAAKY,KAAI,SAACI,GAAM,OACfN,EAAA,KAAA,CAEED,UAAWH,IACXH,QAASa,EAAEb,QACE,cAAAa,EAAEC,GAAEN,SAEhBZ,EAAKa,KAAI,SAACC,GAAQ,OACjBH,iBACEA,EACE,MAAA,CAAAD,UAAWF,IACXJ,QAAS,SAACe,GACRA,EAAEC,iBACFD,EAAEE,iBACJ,EAECT,SAAAK,EAAEH,EAAIE,QARFF,EAAIE,IADI,KALdC,EAAEC,GAmBV,QAIT","x_google_ignoreList":[0]}

package/dist/index.d.ts

@@ -1,5 +1,9 @@
+import styleInject from '/workspaces/node_modules/style-inject/dist/style-inject.es.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+var css_248z = "/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.table{display:table}.w-96{width:24rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.table-auto{table-layout:auto}.cursor-default{cursor:default}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.p-2{padding:.5rem}.text-left{text-align:left}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\\:cursor-pointer:hover{cursor:pointer}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}";
+styleInject(css_248z,{"insertAt":"top"});
+
 type DataObject = {
     [key: string]: any;
     id: number | string;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@teppen/react-ui",
-  "version": "0.0.4",
+  "version": "0.0.10",
   "description": "React UI Component",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "rollup": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "rollup": "npm run clean && rollup -c --bundleConfigAsCjs --forceExit",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "jest"
@@ -47,6 +47,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^7.6.17",
     "tailwindcss": "^3.4.1",
+    "tailwind-variants": "^0.2.0",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
@@ -60,5 +61,8 @@
     "LICENSE",
     "types",
     "dist"
-  ]
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
 }