@soul-refiner/design-system 2.0.4 → 2.1.2

package/dist/components/table/table/table.js

@@ -1,50 +1,22 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var box = require('../../atoms/box/box.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Table = ({ border = true, children, compact, footer, header, separated, striped, sx, padding = 32, }) => {
-    return (React__default.default.createElement(box.Box, { "$backgroundColor": "white", "$borderRadius": "large", "$display": "flex", "$dir": "column", "$gap": 32, "$padding": padding, sx: compact ? 'width: fit-content;' : '' },
-        !!header && header,
-        React__default.default.createElement(box.Box, { "$borderRadius": "small", sx: border ? 'border: 1px solid var(--color-grey-8);' : '' },
-            React__default.default.createElement(TableElement, { "$compact": compact, "$separated": separated, "$striped": striped, "$sx": sx }, children)),
-        !!footer && footer));
-};
-const TableElement = styled.styled.table `
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Table=({border:e=!0,children:t,compact:l,footer:a,header:o,separated:r,striped:d,sx:i,padding:n=32})=>React__default.default.createElement(box.Box,{$backgroundColor:"white",$borderRadius:"large",$display:"flex",$dir:"column",$gap:32,$padding:n,sx:l?"width: fit-content;":""},!!o&&o,React__default.default.createElement(box.Box,{$borderRadius:"small",sx:e?"border: 1px solid var(--color-grey-8);":""},React__default.default.createElement(TableElement,{$compact:l,$separated:r,$striped:d,$sx:i},t)),!!a&&a),TableElement=styled.styled.table`
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
-  ${({ $compact }) => ($compact ? 'width: fit-content;' : '')}
-  ${({ $separated }) => $separated
-    ? `
+  ${({$compact:e})=>e?"width: fit-content;":""}
+  ${({$separated:e})=>e?`
     & > tbody > * {
       border-bottom: 1px solid var(--color-grey-9);
       &:last-child {
         border-bottom: none;
       }
-    }`
-    : ''}
-  ${({ $striped }) => $striped
-    ? `
+    }`:""}
+  ${({$striped:e})=>e?`
     & > tbody > *:nth-of-type(even) {
       background-color: var(--color-grey-10);
-    }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-/********************************************************
- *  Table Head
- */
-const Head = ({ children, ...rest }) => {
-    return React__default.default.createElement(HeadElement, { ...rest }, children);
-};
-const HeadElement = styled.styled.thead `
+    }`:""}
+  ${({$sx:e})=>e||""}
+`,Head=({children:e,...t})=>React__default.default.createElement(HeadElement,{...t},e),HeadElement=styled.styled.thead`
   tr {
     background-color: var(--color-grey-10);
     border-top-left-radius: 8px;
@@ -58,16 +30,7 @@ const HeadElement = styled.styled.thead `
       border-top-right-radius: 8px;
     }
   }
-`;
-Head.displayName = 'Table.Head';
-Table.Head = Head;
-/********************************************************
- *  Table Body
- */
-const Body = ({ children, ...rest }) => {
-    return React__default.default.createElement(BodyElement, { ...rest }, children);
-};
-const BodyElement = styled.styled.tbody `
+`,Body=(Head.displayName="Table.Head",Table.Head=Head,({children:e,...t})=>React__default.default.createElement(BodyElement,{...t},e)),BodyElement=styled.styled.tbody`
   & > tr:last-of-type {
     & > *:first-child {
       border-bottom-left-radius: 8px;
@@ -77,53 +40,21 @@ const BodyElement = styled.styled.tbody `
       border-bottom-right-radius: 8px;
     }
   }
-`;
-Body.displayName = 'Table.Body';
-Table.Body = Body;
-/********************************************************
- *  Table Foot
- */
-const Foot = ({ children, ...rest }) => {
-    return React__default.default.createElement("tfoot", { ...rest }, children);
-};
-Foot.displayName = 'Table.Foot';
-Table.Footer = Foot;
-const Row = ({ children, disabled, href, hoverable = false, onClick, selected, sx, ...rest }) => {
-    const handleClick = href
-        ? (event) => {
-            if (event.metaKey || event.ctrlKey) {
-                const win = window.open(href, '_blank');
-                win?.focus();
-            }
-            else {
-                window.location.href = href;
-            }
-        }
-        : onClick
-            ? (event) => {
-                onClick(event);
-            }
-            : undefined;
-    return (React__default.default.createElement(RowElement, { onClick: handleClick, "$disabled": disabled, "$hoverable": hoverable, "$isAnchor": !!href, "$selected": selected, "$sx": sx, ...rest }, children));
-};
-const RowElement = styled.styled.tr `
+`,Foot=(Body.displayName="Table.Body",Table.Body=Body,({children:e,...t})=>React__default.default.createElement("tfoot",{...t},e)),Row=(Foot.displayName="Table.Foot",Table.Footer=Foot,({children:e,disabled:t,href:l,hoverable:a=!1,onClick:o,selected:r,sx:d,...i})=>{var n=l?e=>{e.metaKey||e.ctrlKey?window.open(l,"_blank")?.focus():window.location.href=l}:o?e=>{o(e)}:void 0;return React__default.default.createElement(RowElement,{onClick:n,$disabled:t,$hoverable:a,$isAnchor:!!l,$selected:r,$sx:d,...i},e)}),RowElement=styled.styled.tr`
   display: table-row;
 
-  ${({ $disabled }) => $disabled
-    ? `
+  ${({$disabled:e})=>e?`
     background-color: var(--color-grey-9) !important;
     color: var(--color-grey-7);
     & > * {
       color: var(--color-grey-7) !important;
-    }`
-    : ''}
+    }`:""}
 
-  ${({ $disabled, $hoverable }) => !$disabled && $hoverable ? 'background-color: var(--color-grey-9);' : ''}
+  ${({$disabled:e,$hoverable:t})=>!e&&t?"background-color: var(--color-grey-9);":""}
 
-  ${({ $disabled, $selected }) => !$disabled && $selected ? 'background-color: var(--color-grey-8;' : ''}
+  ${({$disabled:e,$selected:t})=>!e&&t?"background-color: var(--color-grey-8;":""}
 
-  ${({ $disabled, $isAnchor }) => !$disabled && $isAnchor
-    ? `
+  ${({$disabled:e,$isAnchor:t})=>!e&&t?`
     cursor: pointer;
     padding-right: 24px;
 
@@ -140,53 +71,31 @@ const RowElement = styled.styled.tr `
         right: 12px;
         top: calc(50% - 11px);
       }
-    }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-Row.displayName = 'Table.Row';
-Table.Row = Row;
-const Cell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
-    const percentageWidth = width ? width * (1 / 16) + '%' : undefined;
-    return (React__default.default.createElement(CellElement, { "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' },
-        React__default.default.createElement("div", null, children)));
-};
-const CellElement = styled.styled.td `
-  width: ${({ $width }) => $width};
+    }`:""}
+  ${({$sx:e})=>e||""}
+`,Cell=(Row.displayName="Table.Row",Table.Row=Row,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?d*(1/16)+"%":void 0;return React__default.default.createElement(CellElement,{$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},React__default.default.createElement("div",null,e))}),CellElement=styled.styled.td`
+  width: ${({$width:e})=>e};
   height: 20px;
   font-family: var(--font-inter);
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   color: var(--color-grey-3);
-  vertical-align: ${({ $verticalAlign }) => $verticalAlign ? $verticalAlign : ''};
-  text-align: ${({ $textAlign }) => ($textAlign ? $textAlign : '')};
-  padding: ${({ $padding }) => $padding};
-  ${({ $clamp }) => $clamp
-    ? `
+  vertical-align: ${({$verticalAlign:e})=>e||""};
+  text-align: ${({$textAlign:e})=>e||""};
+  padding: ${({$padding:e})=>e};
+  ${({$clamp:e})=>e?`
   & > div {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
-    line-clamp: ${$clamp};
-    -webkit-line-clamp: ${$clamp};
+    line-clamp: ${e};
+    -webkit-line-clamp: ${e};
     -webkit-box-orient: vertical;
-  }`
-    : ''}
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-Cell.displayName = 'Table.Cell';
-Table.Cell = Cell;
-const HeaderCell = ({ children, lines, padding = '16px 24px', sx, textAlign = 'left', verticalAlign = 'middle', width, }) => {
-    const percentageWidth = width ? width * (100 / 16) + '%' : undefined;
-    return (React__default.default.createElement(HeadCellElement, { as: "th", "$clamp": lines, "$padding": padding, "$sx": sx, "$textAlign": textAlign, "$verticalAlign": verticalAlign, "$width": percentageWidth ? percentageWidth : 'fit-content' }, children));
-};
-const HeadCellElement = styled.styled(CellElement) `
+  }`:""}
+  ${({$sx:e})=>e||""}
+`,HeaderCell=(Cell.displayName="Table.Cell",Table.Cell=Cell,({children:e,lines:t,padding:l="16px 24px",sx:a,textAlign:o="left",verticalAlign:r="middle",width:d})=>{d=d?6.25*d+"%":void 0;return React__default.default.createElement(HeadCellElement,{as:"th",$clamp:t,$padding:l,$sx:a,$textAlign:o,$verticalAlign:r,$width:d||"fit-content"},e)}),HeadCellElement=styled.styled(CellElement)`
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
-`;
-HeaderCell.displayName = 'Table.HeaderCell';
-Table.HeaderCell = HeaderCell;
-
-exports.Table = Table;
+`;HeaderCell.displayName="Table.HeaderCell",Table.HeaderCell=HeaderCell,exports.Table=Table;