oneslash-design-system 1.2.14 → 1.2.15

package/components/tableCell.tsx

@@ -3,12 +3,21 @@ import React from 'react';
 
 interface TableCellProps{
 		children: React.ReactNode;
+		width?: string; // e.g., '200px', '25%', 'auto'
+		minWidth?: string;
+		align?: 'left' | 'center' | 'right';
 	}
-	
-export default function TableCell({children}: TableCellProps) {
+
+export default function TableCell({children, width, minWidth, align = 'left'}: TableCellProps) {
+		const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+		const widthStyle = width ? { width, minWidth: minWidth || width } : {};
+		const flexClass = width ? '' : 'flex-1';
 
 		return (
-				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider">
+				<div
+						className={`${flexClass} p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider ${alignClass}`}
+						style={widthStyle}
+				>
 						{children}
 				</div>
 		);

package/components/tableHeaderCell.tsx

@@ -3,12 +3,21 @@ import React from 'react';
 
 interface TableHeaderCellProps{
 		children: React.ReactNode;
+		width?: string; // e.g., '200px', '25%', 'auto'
+		minWidth?: string;
+		align?: 'left' | 'center' | 'right';
 	}
-	
-export default function TableHeaderCell({children}: TableHeaderCellProps) {
+
+export default function TableHeaderCell({children, width, minWidth, align = 'left'}: TableHeaderCellProps) {
+		const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+		const widthStyle = width ? { width, minWidth: minWidth || width } : {};
+		const flexClass = width ? '' : 'flex-1';
 
 		return (
-				<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary">
+				<div
+						className={`${flexClass} p-2 text-body2 text-light-text-primary dark:text-dark-text-primary ${alignClass}`}
+						style={widthStyle}
+				>
 						{children}
 				</div>
 		);

package/dist/components/tableCell.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 interface TableCellProps {
     children: React.ReactNode;
+    width?: string;
+    minWidth?: string;
+    align?: 'left' | 'center' | 'right';
 }
-export default function TableCell({ children }: TableCellProps): React.JSX.Element;
+export default function TableCell({ children, width, minWidth, align }: TableCellProps): React.JSX.Element;
 export {};

package/dist/components/tableCell.jsx

@@ -1,8 +1,11 @@
 'use client';
 import React from 'react';
 export default function TableCell(_a) {
-    var children = _a.children;
-    return (<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider">
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, _b = _a.align, align = _b === void 0 ? 'left' : _b;
+    var alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+    var widthStyle = width ? { width: width, minWidth: minWidth || width } : {};
+    var flexClass = width ? '' : 'flex-1';
+    return (<div className={"".concat(flexClass, " p-2 text-body2 text-light-text-primary dark:text-dark-text-primary border-t border-light-misc-divider dark:border-dark-misc-divider ").concat(alignClass)} style={widthStyle}>
 						{children}
 				</div>);
 }

package/dist/components/tableHeaderCell.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 interface TableHeaderCellProps {
     children: React.ReactNode;
+    width?: string;
+    minWidth?: string;
+    align?: 'left' | 'center' | 'right';
 }
-export default function TableHeaderCell({ children }: TableHeaderCellProps): React.JSX.Element;
+export default function TableHeaderCell({ children, width, minWidth, align }: TableHeaderCellProps): React.JSX.Element;
 export {};

package/dist/components/tableHeaderCell.jsx

@@ -1,8 +1,11 @@
 'use client';
 import React from 'react';
 export default function TableHeaderCell(_a) {
-    var children = _a.children;
-    return (<div className="flex-1 p-2 text-body2 text-light-text-primary dark:text-dark-text-primary">
+    var children = _a.children, width = _a.width, minWidth = _a.minWidth, _b = _a.align, align = _b === void 0 ? 'left' : _b;
+    var alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+    var widthStyle = width ? { width: width, minWidth: minWidth || width } : {};
+    var flexClass = width ? '' : 'flex-1';
+    return (<div className={"".concat(flexClass, " p-2 text-body2 text-light-text-primary dark:text-dark-text-primary ").concat(alignClass)} style={widthStyle}>
 						{children}
 				</div>);
 }

package/dist/output.css

@@ -944,9 +944,15 @@ video {
   padding-top: 3px;
   padding-bottom: 3px;
 }
+.text-left {
+  text-align: left;
+}
 .text-center {
   text-align: center;
 }
+.text-right {
+  text-align: right;
+}
 .text-body1 {
   font-size: 16px;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",