aravint-ui-navigation 1.0.67 → 1.0.69

package/Readme.md

@@ -265,16 +265,7 @@ by dividers (e.g. PNC/RDR detail header, ticket summary, order details).
 ## Usage
 
 ```tsx
-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";
+import { DetailRow, SummaryDetailsCard } from "@digitus-fci-oa/navigation";
 
 const rows: DetailRow[] = [
   [
@@ -303,6 +294,60 @@ 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                                    |
@@ -320,7 +365,7 @@ const rows: DetailRow[] = [
 | Prop    | Type                | Default     | Description                                                                       |
 | ------- | ------------------- | ----------- | ------------------------------------------------------------------------------------ |
 | `label` | `string`            | —           | Small uppercase label                                                             |
-| `value` | `ReactNode`         | —           | The value to display                                                              |
+| `value` | `ReactNode`         | —           | Value to display. Strings/numbers use the component's text behavior; JSX such as tables renders directly. |
 | `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) |