aravint-ui-navigation 1.0.69 → 1.0.70

package/Readme.md

@@ -265,7 +265,16 @@ by dividers (e.g. PNC/RDR detail header, ticket summary, order details).
 ## Usage
 
 ```tsx
-import { DetailRow, SummaryDetailsCard } from "@digitus-fci-oa/navigation";
+import  { DetailRow, SummaryDetailsCard } from "@digitus-fci-oa/navigation";
+
+
+
+## Import Styles
+
+Import the stylesheet once in your application's global CSS file (e.g. `index.css` or `App.css`).
+
+```css
+@import "@digitus-fci-oa/navigation/dist/navigation.css";
 
 const rows: DetailRow[] = [
   [
@@ -294,65 +303,12 @@ const rows: DetailRow[] = [
 />
 ```
 
-`value` accepts a `ReactNode`, so a field can render client-provided JSX such as a table. Use `span` to control the field width; with four columns, a one-column summary field beside a three-column table matches layouts such as a charge summary:
-
-```tsx
-const charges = [
-  { range: 'From 1kg to 44 Kg', rate: '1.31' },
-  { range: 'From 45kg to 99kg', rate: '1.31' },
-  { range: 'From 100kg to 249kg', rate: '1.31' },
-];
-
-const airFreightRows: DetailRow[] = [
-  [
-    { label: 'Minimum Charge', value: '150.00' },
-    {
-      label: '',
-      span: 3,
-      value: (
-        <div className="air-freight-table-wrap">
-          <table className="air-freight-table">
-            <tbody>
-              {charges.map(({ range, rate }) => (
-                <tr key={range}>
-                  <td>{range}</td>
-                  <td>{rate}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ),
-    },
-  ],
-];
-
-<SummaryDetailsCard rows={airFreightRows} columns={4} title="Air Freight Charges" />
-```
-
-Style custom content in the consuming app. For example:
-
-```css
-.air-freight-table-wrap {
-  overflow-x: auto;
-}
-
-.air-freight-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.air-freight-table td {
-  border: 1px solid #e5e7eb;
-  padding: 0.5rem;
-}
-```
-
 ## Props
 
 | Prop               | Type          | Default        | Description                                    |
 | ------------------ | ------------- | -------------- | ---------------------------------------------- |
-| `rows`             | `DetailRow[]` | —              | Rows of fields, top to bottom, each row on its own divider-separated line |
+| `rows`             | `DetailRow[]` | —              | Optional rows of fields, top to bottom, each row on its own divider-separated line. Used when `children` is not provided. |
+| `children`         | `ReactNode`   | —              | Optional custom body content rendered inside the card, useful for tables or client-specific layouts. |
 | `className`        | `string`      | `'mt-2 mx-2'`  | Extra classes on the outer card                |
 | `showRowDividers`  | `boolean`     | `true`         | Show a top border between rows                 |
 | `columns`          | `1 \| 2 \| 3 \| 4` | `4`        | Number of columns in each row on desktop/tablet |
@@ -360,12 +316,38 @@ Style custom content in the consuming app. For example:
 | `title`            | `ReactNode`   | —              | Optional title shown in the card header         |
 | `onEdit`           | `() => void`  | —              | Optional callback; when provided, shows an Edit button that calls it |
 
+### Custom Body
+
+Pass content as children when the client needs a custom layout, such as a table.
+The card retains its title and Edit button, and `children` takes precedence over `rows`.
+
+```tsx
+<SummaryDetailsCard title="Air Freight Charges" onEdit={handleEdit}>
+  <div className="air-freight-summary">
+    <div>
+      <p>Minimum Charge</p>
+      <strong>150.00</strong>
+    </div>
+    <table>
+      <tbody>
+        {charges.map((charge) => (
+          <tr key={charge.range}>
+            <td>{charge.range}</td>
+            <td>{charge.rate}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</SummaryDetailsCard>
+```
+
 ### Field (`DetailRow` = `DetailField[]`)
 
 | Prop    | Type                | Default     | Description                                                                       |
 | ------- | ------------------- | ----------- | ------------------------------------------------------------------------------------ |
 | `label` | `string`            | —           | Small uppercase label                                                             |
-| `value` | `ReactNode`         | —           | Value to display. Strings/numbers use the component's text behavior; JSX such as tables renders directly. |
+| `value` | `ReactNode`         | —           | The value to display                                                              |
 | `valueColor` | `CSSProperties['color']` | — | Optional CSS color for this field's value                                      |
 | `size`  | `'default' \| 'lg'` | `'default'` | `'lg'` for hero fields like Title/Remark                                          |
 | `span`  | `1 \| 2 \| 3 \| 4`  | `1`         | How many of the 4 grid columns this field occupies (desktop/tablet — mobile is always full width) |