@lovett/ui 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "publishConfig": {
     "access": "restricted"

package/src/data-grid/index.ts

@@ -10,6 +10,7 @@
  */
 
 export { DataGrid } from './data-grid'
+export { DataGridToolbar, type DataGridToolbarProps } from './toolbar'
 export { DataGridColumnOptionsMenu } from './column-options-menu'
 export { DrawerPanel } from './drawer-panel'
 export {

package/src/data-grid/table-elements.tsx

@@ -34,13 +34,12 @@ export const Table = forwardRef<
       style={{
         border: '1px solid rgb(var(--border))',
         borderRadius: 'var(--radius-lg)',
-        // Thin, light scrollbars (light slate thumb on a transparent track).
-        // Deliberately NOT styling ::-webkit-scrollbar — that would force
-        // classic always-on bars; leaving it unset preserves the platform's
-        // auto-hiding overlay bars so they don't sit over the pinned action
-        // column / content.
-        scrollbarWidth: 'thin',
-        scrollbarColor: 'rgba(100, 116, 139, 0.4) transparent',
+        // NOTE: intentionally NOT setting scrollbar-width / scrollbar-color.
+        // On macOS, any custom scrollbar property opts the element out of the
+        // platform's auto-hiding *overlay* scrollbars into *classic*
+        // always-visible ones — which left the vertical bar permanently
+        // covering the pinned action column. Native overlay bars are already
+        // thin + light AND auto-hide, so we leave them untouched.
       }}
     >
       <table

package/src/data-grid/toolbar.tsx

@@ -0,0 +1,44 @@
+/**
+ * DataGridToolbar — the standard layout band that sits directly above a
+ * DataGrid: a search field on the left and filter / column / view
+ * controls on the right (gray-ui "table toolbar" pattern). Collapses to
+ * a stacked column on narrow viewports.
+ *
+ * Purely a layout primitive — pass whatever search input + action
+ * buttons you like into the slots.
+ */
+
+import type { ReactNode } from 'react'
+
+import { cn } from '../lib/utils'
+
+export interface DataGridToolbarProps {
+  /** Left slot — typically a <SearchBar>. Stretches up to a comfortable
+   * reading width, full-width when stacked. */
+  search?: ReactNode
+  /** Right slot — filter / columns / view-toggle controls. */
+  children?: ReactNode
+  className?: string
+}
+
+export function DataGridToolbar({
+  search,
+  children,
+  className,
+}: DataGridToolbarProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between',
+        className,
+      )}
+    >
+      {search ? <div className="w-full sm:max-w-sm">{search}</div> : <span />}
+      {children ? (
+        <div className="flex flex-wrap items-center gap-2 sm:justify-end">
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/index.ts

@@ -109,6 +109,7 @@ export {
 } from './dropdown-menu'
 export {
   DataGrid,
+  DataGridToolbar,
   DataGridColumnOptionsMenu,
   DataGridDragOverlay,
   DataGridDropIndicator,
@@ -117,6 +118,7 @@ export {
   type DataGridProps,
   type DataGridRowBase,
   type DataGridSortState,
+  type DataGridToolbarProps,
   type DataGridToolbarRenderProps,
   type DataGridIcon,
   type EditingCell,