@paubox/ui 1.16.0 → 1.18.0

package/index.esm.js

@@ -24058,7 +24058,9 @@ function _templateObject$h() {
         ";\n  border: 1px solid\n    ",
         ";\n  border-radius: 0.5rem;\n  min-height: ",
         ";\n  padding: ",
-        ";\n  transition: all 150ms ease-in-out;\n  cursor: text;\n"
+        ";\n  transition: all 150ms ease-in-out;\n  cursor: text;\n\n  html.dark & {\n    background-color: ",
+        ";\n    border-color: ",
+        ";\n  }\n"
     ]);
     _templateObject$h = function _templateObject() {
         return data;
@@ -24069,7 +24071,9 @@ function _templateObject1$d() {
     var data = _tagged_template_literal$h([
         "\n  flex: 1;\n  min-width: 8rem;\n  border: none;\n  background-color: transparent;\n  color: ",
         ";\n  outline: none;\n  padding: 0;\n\n  &::placeholder {\n    color: ",
-        ";\n  }\n\n  ",
+        ";\n  }\n\n  html.dark & {\n    color: ",
+        ";\n\n    &::placeholder {\n      color: ",
+        ";\n    }\n  }\n\n  ",
         "\n"
     ]);
     _templateObject1$d = function _templateObject() {
@@ -24082,7 +24086,10 @@ function _templateObject2$d() {
         "\n  background-color: ",
         ";\n  border-radius: 1rem;\n  border: none;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n  white-space: nowrap;\n  ",
         "\n\n  &:focus-visible {\n    outline: 2px solid ",
-        ";\n    outline-offset: 1px;\n  }\n"
+        ";\n    outline-offset: 1px;\n  }\n\n  html.dark & {\n    background-color: ",
+        ";\n    color: ",
+        ";\n\n    &:focus-visible {\n      outline-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject2$d = function _templateObject() {
         return data;
@@ -24092,6 +24099,7 @@ function _templateObject2$d() {
 function _templateObject3$a() {
     var data = _tagged_template_literal$h([
         "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n  flex-shrink: 0;\n\n  & svg {\n    font-size: 1rem;\n    color: ",
+        ";\n  }\n\n  html.dark & svg {\n    color: ",
         ";\n  }\n"
     ]);
     _templateObject3$a = function _templateObject() {
@@ -24103,7 +24111,8 @@ function _templateObject4$8() {
     var data = _tagged_template_literal$h([
         "\n  padding: 0.5rem 0.75rem;\n  color: ",
         ";\n  ",
-        "\n"
+        "\n\n  html.dark & {\n    color: ",
+        ";\n  }\n"
     ]);
     _templateObject4$8 = function _templateObject() {
         return data;
@@ -24131,14 +24140,20 @@ var Wrapper$1 = styled.div(_templateObject$h(), function(param) {
 }, function(param) {
     var sz = param.sz;
     return sz === 'lg' ? '0.5rem 0.563rem' : '0.375rem 0.563rem';
+}, function(param) {
+    var disabled = param.disabled;
+    return disabled ? surfaceRaised : surfacePrimary;
+}, function(param) {
+    var isFocused = param.isFocused, error = param.error;
+    return isFocused ? primary500 : error ? danger500 : surfaceRaised;
 });
-var BaseInput$2 = styled.input(_templateObject1$d(), textPrimary$1, neutral500$1, function(param) {
+var BaseInput$2 = styled.input(_templateObject1$d(), textPrimary$1, neutral500$1, textPrimaryWhite, surfaceMuted, function(param) {
     var sz = param.sz, type = param.type;
     return type === 'primary' ? sz === 'lg' ? $paragraph100Regular : $paragraph200Regular : sz === 'lg' ? $paragraph100Semibold : $paragraph200Semibold;
 });
-var Chip$2 = styled.button(_templateObject2$d(), neutral100$1, $label200Medium, primary600$1);
-var RightIconWrapper = styled.div(_templateObject3$a(), neutral600$1);
-var EmptyState = styled.div(_templateObject4$8(), neutral500$1, $paragraph200Regular);
+var Chip$2 = styled.button(_templateObject2$d(), neutral100$1, $label200Medium, primary600$1, surfaceRaised, textPrimaryWhite, primary500);
+var RightIconWrapper = styled.div(_templateObject3$a(), neutral600$1, surfaceMuted);
+var EmptyState = styled.div(_templateObject4$8(), neutral500$1, $paragraph200Regular, surfaceMuted);
 var OptionWrapper = styled.div(_templateObject5$3());
 /**
  * AutoComplete: single-line input that filters a closed list of options as
@@ -34833,7 +34848,9 @@ var TableHeader = function(param) {
                     ];
                     var columnDef = header === null || header === void 0 ? void 0 : (_header_column = header.column) === null || _header_column === void 0 ? void 0 : _header_column.columnDef;
                     var autoWidth = !!columnDef.autoWidth;
+                    var align = columnDef.align;
                     var isFixed = actionHeaders.includes(header.id);
+                    var justifyContent = align === 'right' ? 'flex-end' : align === 'center' ? 'center' : undefined;
                     return /*#__PURE__*/ jsxs(Th, {
                         variant: "paragraph200Semibold",
                         as: "th",
@@ -34841,6 +34858,7 @@ var TableHeader = function(param) {
                             width: autoWidth ? 'auto' : "".concat(header.getSize(), "px"),
                             minWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
                             maxWidth: isFixed ? "".concat(header.getSize(), "px") : autoWidth ? 'auto' : undefined,
+                            textAlign: align,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(header.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: [
@@ -34849,7 +34867,8 @@ var TableHeader = function(param) {
                                 onClick: !disableControls ? header.column.getToggleSortingHandler() : undefined,
                                 style: {
                                     width: (actionHeaders === null || actionHeaders === void 0 ? void 0 : actionHeaders.includes(header === null || header === void 0 ? void 0 : header.id)) ? "".concat(header.getSize(), "px") : '100%',
-                                    cursor: header.column.getCanSort() ? 'pointer' : 'default'
+                                    cursor: header.column.getCanSort() ? 'pointer' : 'default',
+                                    justifyContent: justifyContent
                                 },
                                 "data-testid": header.column.getCanSort() ? "".concat(testId, "-column-header-").concat(formatForId(header.id), "-sort-button") : undefined,
                                 children: [
@@ -35036,6 +35055,7 @@ var TableBody = function(param) {
                     var overflow = columnDef.overflow;
                     var maxLines = columnDef.maxLines;
                     var autoWidth = columnDef.autoWidth;
+                    var align = columnDef.align;
                     var isFixed = cell.column.id === 'row-select' || cell.column.id === 'context';
                     var cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
                     return /*#__PURE__*/ jsx(Td, {
@@ -35047,6 +35067,7 @@ var TableBody = function(param) {
                             width: autoWidth ? 'auto' : "".concat(cell.column.getSize(), "px"),
                             minWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
                             maxWidth: isFixed ? "".concat(cell.column.getSize(), "px") : undefined,
+                            textAlign: align,
                             padding: dense ? "".concat(spacing(1), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px") : "".concat(spacing(1.5), "px ").concat(spacing(cell.column.id === 'row-select' ? 1 : 1.5), "px")
                         },
                         children: overflow === 'clamp' && maxLines ? /*#__PURE__*/ jsx(ClampWrapper, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.16.0",
+  "version": "1.18.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/Table/Table.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties, HTMLProps, ReactNode } from 'react';
 import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
 import { PageInfoPageBased, PageInfoCursorBased } from '../Pagination/Pagination';
 export type CellOverflow = 'truncate' | 'wrap' | 'clamp';
+export type ColumnAlign = 'left' | 'right' | 'center';
 export declare const TableContainer: import("@emotion/styled").StyledComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@theme").Theme;
 }, {}, {}>;
@@ -18,6 +19,7 @@ export type TableColumn<T> = ColumnDef<T> & {
     autoWidth?: boolean;
     overflow?: CellOverflow;
     maxLines?: number;
+    align?: ColumnAlign;
 };
 export interface RowSelectState {
     [x: string]: boolean;