laif-ds 0.2.75 → 0.2.77

package/dist/agent-docs/manifest.json

@@ -1,20 +1,22 @@
 {
   "schemaVersion": "1.1.0",
-  "generatedAt": "2026-03-09T16:04:39.745Z",
+  "generatedAt": "2026-03-24T15:46:53.701Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.75"
+    "version": "0.2.77"
   },
   "stats": {
-    "documentedComponentCount": 91,
-    "catalogedComponentCount": 90,
-    "missingFromDocsCount": 0,
+    "documentedComponentCount": 92,
+    "catalogedComponentCount": 92,
+    "missingFromDocsCount": 1,
     "deprecatedComponentCount": 2,
-    "averageAiReadinessScore": 54.23,
-    "highAiReadinessCount": 35,
+    "averageAiReadinessScore": 54.73,
+    "highAiReadinessCount": 36,
     "lowAiReadinessCount": 42
   },
-  "missingFromDocs": [],
+  "missingFromDocs": [
+    "TruncatedCell"
+  ],
   "components": [
     {
       "name": "Accordion",
@@ -246,6 +248,92 @@
         "type AlertDialogTriggerProps = React_2.ComponentProps<typeof AlertDialogPrimitive.Trigger>;\r"
       ]
     },
+    {
+      "name": "AppCard",
+      "markdownPath": "components/AppCard.md",
+      "importPath": "laif-ds",
+      "deprecated": false,
+      "replacement": null,
+      "tags": {
+        "cataloged": true,
+        "aiReady": true
+      },
+      "docs": {
+        "sections": [
+          {
+            "title": "Overview",
+            "slug": "overview"
+          },
+          {
+            "title": "Props",
+            "slug": "props"
+          },
+          {
+            "title": "Exports",
+            "slug": "exports"
+          },
+          {
+            "title": "Behavior",
+            "slug": "behavior"
+          },
+          {
+            "title": "Examples",
+            "slug": "examples"
+          },
+          {
+            "title": "Notes",
+            "slug": "notes"
+          }
+        ],
+        "hasPropsTable": true,
+        "hasExamples": true,
+        "exampleTitles": [
+          "AppCardProps",
+          "Variant Reference",
+          "Size Reference",
+          "Basic",
+          "Semantic Variants",
+          "Interactive Card with onClick",
+          "Loading State",
+          "Nested Flat Cards",
+          "Size Variants",
+          "Children as Fallback Body",
+          "Advanced Composition with Sub-components"
+        ],
+        "controlledPattern": "likely-controlled",
+        "requiredProps": []
+      },
+      "metadata": {
+        "props": {
+          "totalProps": 23,
+          "requiredPropsCount": 0,
+          "typedPropsCount": 23,
+          "describedPropsCount": 23
+        },
+        "accessibility": {
+          "hasCoverage": true
+        },
+        "states": {
+          "coveredStates": [
+            "hover",
+            "focus",
+            "loading",
+            "error",
+            "empty"
+          ],
+          "coveredStateCount": 5
+        }
+      },
+      "aiReadiness": {
+        "score": 100,
+        "tier": "high"
+      },
+      "typeReferences": [
+        "interface AppCardProps extends Omit<React_2.ComponentProps<\"div\">, \"title\"> {\r",
+        "type AppCardSize = \"sm\" | \"default\" | \"lg\" | \"none\";\r",
+        "type AppCardVariant = \"default\" | \"elevated\" | \"outlined\" | \"ghost\" | \"flat\" | \"interactive\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\r"
+      ]
+    },
     {
       "name": "AppCheckbox",
       "markdownPath": "components/AppCheckbox.md",
@@ -522,19 +610,13 @@
           "AppFormItem",
           "Submit Button Inside vs Outside",
           "input",
-          "textarea",
-          "select",
-          "multiselect",
+          "select / multiselect",
+          "custom",
           "async / async-multiple",
           "datepicker",
-          "radio",
-          "checkbox",
-          "switch",
-          "slider",
-          "Basic Form",
-          "Full Feature Form",
-          "With Date Range",
-          "External Form Control"
+          "radio / checkbox / switch / slider",
+          "Grid and Icons Example",
+          "Advanced componentProps"
         ],
         "controlledPattern": "likely-controlled",
         "requiredProps": [
@@ -557,10 +639,9 @@
             "disabled",
             "loading",
             "error",
-            "empty",
             "selected"
           ],
-          "coveredStateCount": 5
+          "coveredStateCount": 4
         }
       },
       "aiReadiness": {
@@ -568,8 +649,10 @@
         "tier": "high"
       },
       "typeReferences": [
-        "interface AppFormItem<TAsyncOption = unknown> {\r",
-        "interface AppFormProps<TFormValues extends FieldValues = FieldValues, TAsyncOption = unknown> {\r"
+        "interface AppFormItemComponentProps<TAsyncOption = unknown> {\r",
+        "interface AppFormProps<TFormValues extends FieldValues = FieldValues, TAsyncOption = unknown> {\r",
+        "type AppFormComponentType = \"input\" | \"select\" | \"textarea\" | \"checkbox\" | \"multiselect\" | \"datepicker\" | \"radio\" | \"switch\" | \"slider\" | \"async\" | \"async-multiple\" | \"custom\";\r",
+        "type AppFormItem<TAsyncOption = unknown, TComponent extends AppFormComponentType = AppFormComponentType> = {\r"
       ]
     },
     {
@@ -2585,10 +2668,10 @@
       },
       "metadata": {
         "props": {
-          "totalProps": 22,
+          "totalProps": 23,
           "requiredPropsCount": 0,
-          "typedPropsCount": 22,
-          "describedPropsCount": 22
+          "typedPropsCount": 23,
+          "describedPropsCount": 23
         },
         "accessibility": {
           "hasCoverage": true
@@ -5975,5 +6058,5 @@
       ]
     }
   ],
-  "checksum": "10e072f1a2d3f682aff594d6c5319ff53034c93de21a31cb6a1b3c2c3407fbd4"
+  "checksum": "04503a20ecd4bab54c8394f25ac6f42427d60e457070009b8248a22c8747a5de"
 }

package/dist/agent-docs/truncated-cell.md

@@ -0,0 +1,342 @@
+# TruncatedCell
+
+The TruncatedCell component is designed to display text that may be too long for its container. It automatically detects when text is truncated and provides a popover to show the full content.
+
+## Features
+
+- **Flexible Content**: Accepts plain text or rich ReactNode content
+- **Automatic Truncation Detection**: Uses scrollWidth vs clientWidth comparison to detect if content is truncated
+- **Responsive**: Re-checks truncation on resize using ResizeObserver for better performance
+- **Controlled Popover**: Manages popover state programmatically for better UX
+- **Eye Icon Hint**: Displays an eye icon hint only when content is truncated, with smooth fade-in animation
+- **Button Visibility Control**: Optional `showButton` prop to control eye button visibility
+- **Custom Popover Styling**: `popoverClassName` prop for custom popover content styling
+- **Keyboard Accessibility**: Full keyboard navigation support (Enter/Space to open popover)
+- **Screen Reader Support**: Proper ARIA labels and roles for accessibility
+- **Empty State**: Shows "-" with muted styling when no content is provided
+- **Custom Empty Fallback**: Supports a custom placeholder for empty values
+- **Customizable Styling**: Supports custom CSS classes for container, cell, and popover
+- **Dialog Title**: Optional title for the popover header
+- **Custom Content**: Full JSX support for custom popover content
+- **Hover Effects**: Smooth underline on content hover and button appearance
+- **Scrollable Content**: Long content in popover is scrollable with max height
+- **DX-first API**: Rich children work out of the box, and `text` is only needed when you want explicit popover/accessibility text
+
+## Usage
+
+```tsx
+import { TruncatedCell } from "laif-ds";
+
+// Basic usage with string content
+<TruncatedCell text="Short text" />
+
+// Long text that will be truncated
+<TruncatedCell
+  text="This is a very long text that will be truncated because it exceeds the container width"
+  wrapperClassName="w-56"
+/>
+
+// String children also work without text
+<TruncatedCell wrapperClassName="w-56">
+  This is a string content
+</TruncatedCell>
+
+// Rich content works without duplicating text
+<TruncatedCell wrapperClassName="w-56">
+  <div className="flex items-center gap-2">
+    <Avatar src="/avatar.jpg" />
+    <div className="min-w-0">
+      <p className="font-semibold">John Doe</p>
+      <p className="text-sm text-gray-600">john@example.com</p>
+    </div>
+  </div>
+</TruncatedCell>
+
+// Provide text when you want explicit popover or accessibility content
+<TruncatedCell
+  text="John Doe - john@example.com"
+  title="User details"
+  wrapperClassName="w-56"
+>
+  <UserSummary />
+</TruncatedCell>
+
+// With custom styling and title
+<TruncatedCell
+  text="Custom styled truncated text"
+  title="Full Content"
+  wrapperClassName="w-40"
+  className="max-w-40"
+/>
+
+// With custom popover content and styling
+<TruncatedCell
+  text="Text with custom popover content"
+  title="Custom Content"
+  popoverContent={
+    <div className="space-y-3">
+      <p>Custom JSX content here</p>
+      <button>Action Button</button>
+    </div>
+  }
+  popoverClassName="max-w-md"
+  showButton={true}
+/>
+
+// Hide the eye hint
+<TruncatedCell
+  text="Text without eye button"
+  showButton={false}
+/>
+
+// Empty text
+<TruncatedCell text="" />
+
+// Custom empty fallback
+<TruncatedCell text="" emptyFallback="No value" />
+```
+
+## Props
+
+| Prop               | Type        | Default     | Description                                                                  |
+| ------------------ | ----------- | ----------- | ---------------------------------------------------------------------------- |
+| `children`         | `ReactNode` | `undefined` | Content to display                                                           |
+| `text`             | `string`    | `undefined` | Optional text used for truncation detection, accessibility, and popover copy |
+| `title`            | `string`    | `undefined` | Optional title for the popover dialog                                        |
+| `popoverContent`   | `ReactNode` | `undefined` | Custom popover content (JSX)                                                 |
+| `wrapperClassName` | `string`    | `""`        | Preferred CSS classes for the wrapper container                              |
+| `className`        | `string`    | `""`        | CSS classes for the cell content                                             |
+| `popoverClassName` | `string`    | `""`        | CSS classes for the popover content                                          |
+| `showButton`       | `boolean`   | `true`      | Flag used to show/hide the eye hint                                          |
+| `emptyFallback`    | `ReactNode` | `"-"`       | Custom placeholder rendered when no content is available                     |
+
+## Behavior
+
+### Truncation Detection
+
+- Component monitors the text element's scrollWidth vs clientWidth
+- If scrollWidth > clientWidth, the text is considered truncated
+- Detection runs on mount and on resize
+- When `text` is not provided, the component also extracts `textContent` from the rendered node to power the default popover content
+
+### Visual States
+
+1. **Normal State**: Text is displayed with truncation (CSS `truncate`)
+2. **Truncated State**: Text is truncated + eye icon hint appears
+3. **Empty State**: Shows "-" when text is empty/undefined
+4. **Popover State**: Opens when there is content to inspect, and the eye icon hint appears only when the rendered value is truncated
+
+### Styling
+
+- Container: `flex max-w-60 gap-2` + custom classes
+- Text container: `flex min-w-0 flex-1`
+- Text element: `w-full min-w-0 truncate whitespace-nowrap`
+- Popover: `w-96` with `whitespace-pre-wrap` for multiline support
+
+### Content Types
+
+The TruncatedCell component supports two main usage patterns:
+
+#### 1. String Content (Simple)
+
+```tsx
+// Direct text prop
+<TruncatedCell text="Simple text content" />
+
+// String children (text prop optional)
+<TruncatedCell wrapperClassName="w-56">
+  String content as children
+</TruncatedCell>
+```
+
+#### 2. ReactNode Content (Advanced)
+
+```tsx
+// Rich children work without text
+<TruncatedCell wrapperClassName="w-56">
+  <div className="flex items-center gap-2">
+    <Avatar src="/avatar.jpg" />
+    <div className="min-w-0">
+      <p className="font-semibold">John Doe</p>
+      <p className="text-sm text-gray-600">john@example.com</p>
+    </div>
+  </div>
+</TruncatedCell>
+
+// Add text when you want explicit popover content
+<TruncatedCell text="User profile - John Doe" wrapperClassName="w-56">
+  <UserSummary />
+</TruncatedCell>
+```
+
+### Choosing Between `children` and `text`
+
+- Use `text` for the simplest plain-text case
+- Use `children` when you need custom rendering inside the truncated area
+- Add `text` together with `children` when the rendered content is visual or abbreviated and you want more descriptive text in the popover
+
+```tsx
+// Plain text
+<TruncatedCell text="Contract pending signature" />
+
+// Rich UI with automatic text extraction
+<TruncatedCell wrapperClassName="w-56">
+  <div>Complex content</div>
+</TruncatedCell>
+
+// Rich UI with explicit popover and a11y text
+<TruncatedCell text="Complex content description" wrapperClassName="w-56">
+  <div>Complex content</div>
+</TruncatedCell>
+```
+
+### Custom Popover Content
+
+The `popoverContent` prop allows you to override the default text display with custom JSX content:
+
+- **Full Flexibility**: Any React components can be used as popover content
+- **Backward Compatible**: When not provided, defaults to displaying the text with Typo component
+- **Title Support**: Works seamlessly with the `title` prop for popover headers
+- **Custom Styling**: Use `popoverClassName` to style the popover container
+- **Button Control**: Use `showButton` to control eye hint visibility
+- **Open Behavior**: Custom popover content can open even when the displayed value itself is not truncated
+
+```tsx
+<TruncatedCell
+  text="User profile"
+  title="User Details"
+  popoverContent={
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Avatar src="/avatar.jpg" />
+        <div>
+          <p className="font-semibold">John Doe</p>
+          <p className="text-sm text-gray-600">john@example.com</p>
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button size="sm">Edit</Button>
+        <Button size="sm" variant="outline">
+          View Profile
+        </Button>
+      </div>
+    </div>
+  }
+  popoverClassName="max-w-md"
+  showButton={true}
+/>
+```
+
+### Button Visibility Control
+
+The `showButton` prop gives you control over the eye hint visibility:
+
+```tsx
+// Show eye hint (default)
+<TruncatedCell text="Long text that will be truncated" showButton={true} />
+
+// Hide eye hint
+<TruncatedCell text="Long text without eye hint" showButton={false} />
+```
+
+### Empty Fallback
+
+```tsx
+// Default placeholder
+<TruncatedCell text="" />
+
+// Custom placeholder
+<TruncatedCell text="" emptyFallback="No value" />
+```
+
+### Popover Styling
+
+The `popoverClassName` prop allows custom styling of the popover container:
+
+```tsx
+<TruncatedCell
+  text="Custom styled popover"
+  popoverClassName="max-w-md bg-blue-50 border-blue-200"
+/>
+```
+
+## Technical Details
+
+### Dependencies
+
+- React hooks: `useState`, `useEffect`, `useRef`, `useCallback`
+- Laif-DS components: `Popover`, `PopoverContent`, `PopoverTrigger`, `Typo`, `Icon`
+- Utility: `cn` for class merging
+
+### Performance Optimizations
+
+- **ResizeObserver**: Uses modern ResizeObserver API for better performance than window resize events
+- **useCallback**: Memoizes truncation check function to prevent unnecessary re-renders
+- **Controlled State**: Manages popover state programmatically to avoid prop drilling
+- **Cleanup**: Proper cleanup of observers and event listeners
+- **Optimized Re-renders**: Only re-checks truncation when content changes
+
+### Event Handling
+
+- ResizeObserver for element-specific resize detection
+- Fallback window resize listener for older browsers
+- Click on the cell trigger opens the popover when available
+- Keyboard support (Enter/Space keys)
+- Hover effects with smooth transitions
+
+### Accessibility Features
+
+- **Semantic Trigger**: Uses a real `button` element as the interactive trigger
+- **Keyboard Navigation**: Full support for Enter and Space keys
+- **Screen Reader Labels**: Dynamic `aria-label` based on truncation state
+- **Focus Management**: Native button focus behavior
+- **Semantic HTML**: Popover content remains accessible even for multiline values
+
+## Accessibility
+
+- Text container has cursor pointer to indicate interactivity
+- Hover state provides visual feedback
+- Popover provides full text access for screen readers
+- Eye icon provides a clear visual hint that more content is available
+
+## Examples
+
+### In a Table Cell
+
+```tsx
+const TableCell = ({ value }: { value: string }) => (
+  <TruncatedCell text={value} wrapperClassName="w-56" className="py-2" />
+);
+```
+
+### With Maximum Width Constraint
+
+```tsx
+<TruncatedCell
+  text="Constrained width text that will truncate"
+  wrapperClassName="w-32"
+/>
+```
+
+### Multiline Text Support
+
+```tsx
+<TruncatedCell text="Line 1\nLine 2\nLine 3" className="max-w-48" />
+```
+
+## Comparison with Alternatives
+
+### vs Tooltip
+
+- **TruncatedCell**: Supports click-to-inspect content, and visually hints with the eye icon when text is actually truncated
+- **Tooltip**: Always shows on hover regardless of truncation
+
+### vs CSS text-overflow alone
+
+- **TruncatedCell**: Provides access to full content
+- **CSS only**: Content is inaccessible when truncated
+
+### vs Expandable Text
+
+- **TruncatedCell**: Compact, popover-based approach
+- **Expandable**: Takes more space, inline expansion

package/dist/components/ui/app-card.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as r, jsxs as e, Fragment as c } from "react/jsx-runtime";
+import { cva as A } from "../../node_modules/class-variance-authority/dist/index.js";
+import { designTokens as j } from "../design-tokens.js";
+import { cn as t } from "../../lib/utils.js";
+import { Card as y, CardHeader as b, CardTitle as S, CardDescription as T, CardAction as V, CardContent as g, CardFooter as D } from "./card.js";
+import { Skeleton as s } from "./skeleton.js";
+const F = A(
+  ["flex flex-col border shadow-sm rounded-xl", j.focusRingWithin],
+  {
+    variants: {
+      variant: {
+        default: "bg-d-card text-d-card-foreground border-d-border",
+        elevated: "bg-d-card text-d-card-foreground border-d-border shadow-md",
+        outlined: "bg-transparent text-d-foreground border-d-border shadow-none",
+        ghost: "bg-transparent text-d-foreground border-transparent shadow-none",
+        flat: "bg-d-muted text-d-foreground border-transparent shadow-none",
+        interactive: "bg-d-card text-d-card-foreground border-d-border cursor-pointer transition-shadow duration-200 hover:shadow-md hover:border-d-primary/40",
+        success: "bg-d-success-background text-d-success-foreground border-d-success/30 shadow-none",
+        warning: "bg-d-warning-background text-d-warning-foreground border-d-warning/30 shadow-none",
+        destructive: "bg-d-destructive/10 text-d-destructive border-d-destructive/30 shadow-none",
+        info: "bg-d-primary/10 text-d-primary border-d-primary/30 shadow-none"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function R() {
+  return /* @__PURE__ */ e(c, { children: [
+    /* @__PURE__ */ r(b, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ r(s, { className: "h-4 w-1/2" }),
+      /* @__PURE__ */ r(s, { className: "h-3 w-3/4" })
+    ] }) }),
+    /* @__PURE__ */ e(g, { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ r(s, { className: "h-3 w-full" }),
+      /* @__PURE__ */ r(s, { className: "h-3 w-full" }),
+      /* @__PURE__ */ r(s, { className: "h-3 w-4/5" })
+    ] })
+  ] });
+}
+function I({
+  header: d,
+  title: a,
+  description: n,
+  body: l,
+  actions: o,
+  footer: i,
+  variant: h = "default",
+  size: p,
+  isLoading: x = !1,
+  showHeaderBorder: f = !1,
+  showFooterBorder: u = !1,
+  className: w,
+  headerClassName: v,
+  bodyClassName: N,
+  footerClassName: C,
+  children: m,
+  ...k
+}) {
+  return /* @__PURE__ */ r(
+    y,
+    {
+      className: t(F({ variant: h }), w),
+      size: p,
+      ...k,
+      children: x ? /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ e(c, { children: [
+        (d || a || n || o) && /* @__PURE__ */ r(
+          b,
+          {
+            className: t(
+              f && "border-b border-inherit",
+              v
+            ),
+            children: d || /* @__PURE__ */ e(c, { children: [
+              /* @__PURE__ */ e("div", { className: "flex flex-col gap-1.5", children: [
+                a && /* @__PURE__ */ r(S, { className: "text-base font-semibold", children: a }),
+                n && /* @__PURE__ */ r(T, { children: n })
+              ] }),
+              o && /* @__PURE__ */ r(V, { children: o })
+            ] })
+          }
+        ),
+        (l ?? m) && /* @__PURE__ */ r(
+          g,
+          {
+            className: t(
+              "flex flex-col gap-2",
+              (a || n || d || o) && !f && "pt-0",
+              u && "border-b border-inherit",
+              N
+            ),
+            children: l ?? m
+          }
+        ),
+        i && /* @__PURE__ */ r(
+          D,
+          {
+            className: t(
+              "gap-2",
+              (a || n || d || o || l) && !u && "pt-0",
+              C
+            ),
+            children: i
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  I as AppCard,
+  I as default
+};