@object-ui/fields 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -25,9 +25,9 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.576.0",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.1.0",
-    "@object-ui/core": "3.1.0",
-    "@object-ui/types": "3.1.0"
+    "@object-ui/components": "3.1.1",
+    "@object-ui/core": "3.1.1",
+    "@object-ui/types": "3.1.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/__tests__/cell-renderers.test.tsx

@@ -205,6 +205,96 @@ describe('SelectCellRenderer', () => {
     expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
   });
 
+  it('should auto-detect status semantic colors (Paid → green)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Paid"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-green-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Pending → yellow)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Pending"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-yellow-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Shipped → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Shipped"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Draft → gray)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Draft"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-gray-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Cancelled → red)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Cancelled"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-red-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors (Delivered → purple)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="Delivered"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-purple-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors with snake_case (in_progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in_progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors with hyphen (in-progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in-progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
+  it('should auto-detect status semantic colors with spaces (in progress → blue)', () => {
+    const { container } = render(
+      <SelectCellRenderer
+        value="in progress"
+        field={{ name: 'status', type: 'select', options: [] } as any}
+      />
+    );
+    expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
+  });
+
   it('should render dash for null/empty value', () => {
     render(
       <SelectCellRenderer

package/src/index.tsx

@@ -368,8 +368,10 @@ export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactE
   );
 }
 
-// Priority semantic color mapping (auto-detect from value text)
-const PRIORITY_COLOR_MAP: Record<string, string> = {
+// Semantic color mapping (auto-detect from value text for priority & status fields)
+// Keys use underscore notation; lookup normalizes spaces/hyphens to underscores automatically.
+const SEMANTIC_COLOR_MAP: Record<string, string> = {
+  // Priority values
   critical: 'red',
   urgent: 'red',
   high: 'orange',
@@ -377,6 +379,31 @@ const PRIORITY_COLOR_MAP: Record<string, string> = {
   normal: 'blue',
   low: 'gray',
   none: 'gray',
+  // Status values
+  paid: 'green',
+  completed: 'green',
+  done: 'green',
+  active: 'green',
+  approved: 'green',
+  resolved: 'green',
+  pending: 'yellow',
+  waiting: 'yellow',
+  on_hold: 'yellow',
+  shipped: 'blue',
+  in_progress: 'blue',
+  open: 'blue',
+  processing: 'blue',
+  draft: 'gray',
+  new: 'gray',
+  inactive: 'gray',
+  closed: 'gray',
+  cancelled: 'red',
+  canceled: 'red',
+  rejected: 'red',
+  failed: 'red',
+  overdue: 'red',
+  delivered: 'purple',
+  archived: 'indigo',
 };
 
 // Color to Tailwind class mapping for custom Badge styling
@@ -394,7 +421,7 @@ const BADGE_COLOR_MAP: Record<string, string> = {
 
 function getBadgeColorClasses(color?: string, val?: string): string {
   const resolvedColor = color
-    || (val ? PRIORITY_COLOR_MAP[String(val).toLowerCase()] : undefined);
+    || (val ? SEMANTIC_COLOR_MAP[String(val).toLowerCase().replace(/[\s-]/g, '_')] : undefined);
   return BADGE_COLOR_MAP[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
 }