@shipfox/react-ui 0.24.0 → 0.26.0

package/dist/components/index.d.ts

@@ -36,6 +36,7 @@ export * from './select';
 export * from './sheet';
 export * from './shiny-text';
 export * from './skeleton';
+export * from './slider';
 export * from './table';
 export * from './tabs';
 export * from './textarea';

package/dist/components/index.js

@@ -36,6 +36,7 @@ export * from './select/index.js';
 export * from './sheet/index.js';
 export * from './shiny-text/index.js';
 export * from './skeleton/index.js';
+export * from './slider/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './textarea/index.js';

package/dist/components/modal/modal.d.ts

@@ -38,8 +38,9 @@ type ModalBodyHeaderProps = ComponentProps<'div'> & {
     alt?: string;
     title: string;
     description?: ReactNode;
+    children?: ReactNode;
 };
-declare function ModalBodyHeader({ className, src, alt, title, description, ...props }: ModalBodyHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalBodyHeader({ className, src, alt, title, description, children, ...props }: ModalBodyHeaderProps): import("react/jsx-runtime").JSX.Element;
 export { Modal, ModalPortal, ModalOverlay, ModalTrigger, ModalClose, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalBodyHeader, ModalTitle, ModalDescription, modalContentVariants, modalOverlayVariants, modalDefaultTransition, };
 export type { ModalContentProps, ModalHeaderProps, ModalOverlayProps, ModalTitleProps, ModalDescriptionProps, ModalBodyHeaderProps, };
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.js

@@ -259,7 +259,7 @@ function ModalDescription({ className, ...props }) {
         ...props
     });
 }
-function ModalBodyHeader({ className, src, alt = '', title, description, ...props }) {
+function ModalBodyHeader({ className, src, alt = '', title, description, children, ...props }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: cn('flex flex-col gap-32 items-start max-w-xl', className),
         ...props,
@@ -283,7 +283,8 @@ function ModalBodyHeader({ className, src, alt = '', title, description, ...prop
                         children: description
                     })
                 ]
-            })
+            }),
+            children
         ]
     });
 }

package/dist/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/slider/index.js

@@ -0,0 +1,3 @@
+export * from './slider.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,10 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import type { ComponentProps } from 'react';
+export type SliderProps = ComponentProps<typeof SliderPrimitive.Root> & {
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+};
+declare function Slider({ className, defaultValue, value, min, max, trackClassName, rangeClassName, thumbClassName, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/slider/slider.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../../utils/cn.js';
+const trackDefaults = 'bg-background-switch-off relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4';
+const rangeDefaults = 'bg-foreground-highlight-interactive absolute select-none rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full';
+const thumbDefaults = "relative block size-6 min-w-6 min-h-6 shrink-0 select-none rounded-full border border-border-highlights-interactive bg-foreground-highlight-interactive drop-shadow transition-[color,box-shadow] outline-none after:absolute after:-inset-2 after:block after:content-[''] ring-2 ring-white ring-offset-2 data-disabled:pointer-events-none data-disabled:opacity-50";
+function Slider({ className, defaultValue, value, min = 0, max = 100, trackClassName, rangeClassName, thumbClassName, ...props }) {
+    const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [
+        min,
+        max
+    ];
+    return /*#__PURE__*/ _jsxs(SliderPrimitive.Root, {
+        "data-slot": "slider",
+        defaultValue: defaultValue,
+        value: value,
+        min: min,
+        max: max,
+        className: cn('data-[orientation=vertical]:min-h-40 relative flex w-full touch-none select-none items-center data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(SliderPrimitive.Track, {
+                "data-slot": "slider-track",
+                className: cn(trackDefaults, trackClassName),
+                children: /*#__PURE__*/ _jsx(SliderPrimitive.Range, {
+                    "data-slot": "slider-range",
+                    className: cn(rangeDefaults, rangeClassName)
+                })
+            }),
+            values.map((val)=>/*#__PURE__*/ _jsx(SliderPrimitive.Thumb, {
+                    "data-slot": "slider-thumb",
+                    className: cn(thumbDefaults, thumbClassName)
+                }, val))
+        ]
+    });
+}
+export { Slider };
+
+//# sourceMappingURL=slider.js.map

package/dist/components/table/data-table.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
 import { Card, CardContent } from '../../components/card/index.js';
 import { Checkbox } from '../../components/checkbox/index.js';
@@ -85,7 +85,18 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             pagination: pagination ? paginationState : undefined
         }
     });
-    const skeletonRowCount = pageSize > 5 ? 5 : pageSize;
+    const rowModel = table.getRowModel();
+    const rowCount = rowModel.rows.length;
+    const hasRows = rowCount > 0;
+    const currentPageSize = pagination ? paginationState.pageSize : pageSize;
+    const skeletonRowCount = currentPageSize > 5 ? 5 : currentPageSize;
+    const headerHeight = 40;
+    const rowHeight = 46;
+    const paginationHeight = 52.5;
+    const rowsForHeight = hasRows ? currentPageSize : 5;
+    const shouldShowPagination = pagination && hasRows;
+    const minTableHeight = pagination ? headerHeight + rowsForHeight * rowHeight + (shouldShowPagination ? paginationHeight : 0) : undefined;
+    const emptyRowCount = pagination && hasRows ? Math.max(0, currentPageSize - rowCount) : 0;
     if (isLoading) {
         return /*#__PURE__*/ _jsx(Card, {
             className: cn('p-0 gap-0', className),
@@ -93,6 +104,9 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             children: /*#__PURE__*/ _jsx(CardContent, {
                 className: "overflow-hidden p-0",
                 children: /*#__PURE__*/ _jsxs(Table, {
+                    style: minTableHeight ? {
+                        minHeight: `${minTableHeight}px`
+                    } : undefined,
                     children: [
                         /*#__PURE__*/ _jsx(TableHeader, {
                             children: /*#__PURE__*/ _jsx(TableRow, {
@@ -127,8 +141,11 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
         children: /*#__PURE__*/ _jsx(CardContent, {
             className: "overflow-hidden p-0",
             children: /*#__PURE__*/ _jsxs(Table, {
+                style: minTableHeight ? {
+                    minHeight: `${minTableHeight}px`
+                } : undefined,
                 children: [
-                    table.getRowModel().rows.length > 0 ? /*#__PURE__*/ _jsx(TableHeader, {
+                    hasRows ? /*#__PURE__*/ _jsx(TableHeader, {
                         children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
                                 className: "hover:bg-transparent border-b",
                                 children: headerGroup.headers.map((header)=>/*#__PURE__*/ _jsx(TableHead, {
@@ -137,32 +154,50 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
                             }, headerGroup.id))
                     }) : null,
                     /*#__PURE__*/ _jsx(TableBody, {
-                        children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
-                                onClick: ()=>onRowClick?.(row.original),
-                                "data-selected": row.getIsSelected(),
-                                className: onRowClick ? 'cursor-pointer' : '',
-                                tabIndex: onRowClick ? 0 : undefined,
-                                role: onRowClick ? 'button' : undefined,
-                                onKeyDown: (event)=>{
-                                    if (!onRowClick) return;
-                                    if (event.key === 'Enter' || event.key === ' ') {
-                                        event.preventDefault();
-                                        onRowClick(row.original);
-                                    }
-                                },
-                                children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
-                                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
-                                    }, cell.id))
-                            }, row.id)) : /*#__PURE__*/ _jsx(TableRow, {
+                        children: hasRows ? /*#__PURE__*/ _jsxs(_Fragment, {
+                            children: [
+                                rowModel.rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
+                                        onClick: ()=>onRowClick?.(row.original),
+                                        "data-selected": row.getIsSelected(),
+                                        className: onRowClick ? 'cursor-pointer' : '',
+                                        tabIndex: onRowClick ? 0 : undefined,
+                                        role: onRowClick ? 'button' : undefined,
+                                        onKeyDown: (event)=>{
+                                            if (!onRowClick) return;
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                onRowClick(row.original);
+                                            }
+                                        },
+                                        children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                            }, cell.id))
+                                    }, row.id)),
+                                emptyRowCount > 0 && Array.from({
+                                    length: emptyRowCount
+                                }, (_, idx)=>{
+                                    const emptyRowKey = `empty-row-${rowCount}-pos-${idx + rowCount}`;
+                                    return /*#__PURE__*/ _jsx(TableRow, {
+                                        className: "hover:bg-transparent pointer-events-none",
+                                        children: table.getAllColumns().map((column)=>/*#__PURE__*/ _jsx(TableCell, {
+                                                children: /*#__PURE__*/ _jsx("span", {
+                                                    className: "invisible",
+                                                    children: "."
+                                                })
+                                            }, column.id))
+                                    }, emptyRowKey);
+                                })
+                            ]
+                        }) : /*#__PURE__*/ _jsx(TableRow, {
                             className: "hover:bg-transparent",
                             children: /*#__PURE__*/ _jsx(TableCell, {
                                 colSpan: table.getAllColumns().length,
-                                className: "h-240 text-center rounded-t-8",
+                                className: "h-240 text-center rounded-t-8 hover:bg-transparent",
                                 children: emptyState || /*#__PURE__*/ _jsx(EmptyState, {})
                             })
                         })
                     }),
-                    pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
+                    shouldShowPagination && /*#__PURE__*/ _jsx(TablePagination, {
                         table: table,
                         pageSizeOptions: pageSizeOptions,
                         showSelectedCount: showSelectedCount,

package/dist/components/table/table.js

@@ -3,6 +3,7 @@ import { cn } from '../../utils/cn.js';
 function Table({ className, ...props }) {
     return /*#__PURE__*/ _jsx("div", {
         className: "relative w-full overflow-auto scrollbar rounded-x-8 rounded-b-8",
+        style: props.style,
         children: /*#__PURE__*/ _jsx("table", {
             "data-slot": "table",
             className: cn('w-full caption-bottom text-sm', className),
@@ -48,7 +49,7 @@ function TableHead({ className, ...props }) {
 function TableCell({ className, ...props }) {
     return /*#__PURE__*/ _jsx("td", {
         "data-slot": "table-cell",
-        className: cn('px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base', 'bg-background-neutral-base', 'group-hover/row:bg-background-neutral-hover', 'group-data-[selected=true]/row:bg-background-neutral-pressed!', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14', className),
+        className: cn('px-12 py-10 align-middle text-sm leading-20 text-foreground-neutral-base truncate', 'bg-background-neutral-base', 'group-hover/row:bg-background-neutral-hover', 'group-data-[selected=true]/row:bg-background-neutral-pressed!', '[&:has([role=checkbox])]:pr-0 [&:has([role=checkbox])]:pt-14', className),
         ...props
     });
 }

package/dist/components/table/table.stories.data.js

@@ -75,7 +75,7 @@
 };
 /**
  * Sample job data
- */ export const jobsData = generateJobData(100);
+ */ export const jobsData = generateJobData(51);
 /**
  * Sample search job data
  */ export const searchJobsData = generateSearchJobData(50);