laif-ds 0.2.75 → 0.2.77

package/dist/CHANGELOG.md

@@ -5,8 +5,35 @@ All notable technical changes to the laif-ds core will be documented in this fil
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [laif-ds@0.2.77]
+
+### 🚀 Added
+
+- **AppCard**: Added new card wrapper component with 4 visual variants (default, elevated, outlined, ghost), support for title, description, body, footer, and actions props with optional header and footer borders, and comprehensive Storybook examples and documentation
+- **AppForm**: Added column span sizing, configurable icon placement, enhanced search options, and comprehensive TypeScript typing improvements
+
+### 🔧 Changed
+
+- **AppForm**: Updated to adopt new form pattern with improved layout, enhanced JSDoc comments, and better type safety across components
+- **General**: Removed "use client" directives and fixed export formatting across components for better compatibility
+
+## [laif-ds@0.2.76]
+
+### 🚀 Added
+
+- **FileUploader**: Added support for archive file types including `zip`, `rar`, `7z`, `tar`, `gz`, and `tgz`
+- **TruncatedCell**: Added a new component for displaying truncated text content with tooltip expansion and responsive text handling
+- **DataTable**: Added `rowClassName` prop for custom CSS classes based on row data
+- **DataTable**: Added `headerClassName` and `cellClassName` support in column meta for custom styling
+- **DataTable**: Enhanced utils typing with mapped union for better accessor config type inference
+
 ## [laif-ds@0.2.75]
 
+### ⚠️ Breaking changes
+
+- **DataTable**: the cell value type is now defined better so some small compatibility issues my emerge with strict typing in precedent versions
+- **general**: Since the introduction of strict EsLint in the repository a big number of components has got updated, some small bugs may emerge
+
 ### 🚀 Added
 
 - **Storybook**: Added a dedicated changelog documentation page with markdown rendering and release-oriented navigation

package/dist/_virtual/index6.js

@@ -1,5 +1,5 @@
 "use client";
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };

package/dist/_virtual/index7.js

@@ -1,5 +1,5 @@
 "use client";
-var e = { exports: {} };
+var e = {};
 export {
-  e as __module
+  e as __exports
 };

package/dist/agent-docs/adoption-report.json

@@ -1,12 +1,12 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-03-09T16:04:40.003Z",
+  "generatedAt": "2026-03-24T15:46:53.964Z",
   "package": {
     "name": "laif-ds",
-    "version": "0.2.75"
+    "version": "0.2.77"
   },
   "summary": {
-    "scannedFiles": 387,
+    "scannedFiles": 393,
     "deprecatedComponentsCount": 2,
     "deprecatedComponentsUsedCount": 0,
     "componentsWithoutExamplesCount": 5,
@@ -15,7 +15,7 @@
     "lowAiReadinessComponentsCount": 42,
     "componentsWithoutAccessibilityCoverageCount": 46,
     "componentsWithWeakStateCoverageCount": 73,
-    "averageAiReadinessScore": 54.23
+    "averageAiReadinessScore": 54.73
   },
   "deprecatedUsage": [],
   "documentationGaps": {
@@ -358,7 +358,7 @@
     "repeatedClassNames": [
       {
         "className": "flex items-center gap-2",
-        "occurrences": 34,
+        "occurrences": 36,
         "files": [
           "src/components/stories/app-checkbox.stories.tsx",
           "src/components/stories/app-dialog.stories.tsx",
@@ -371,6 +371,7 @@
           "src/components/stories/data-table-no-utils-example.stories.tsx",
           "src/components/stories/data-table-utils-example.stories.tsx",
           "src/components/stories/playground.stories.tsx",
+          "src/components/stories/truncated-cell.stories.tsx",
           "src/components/ui/app-form.tsx",
           "src/components/ui/app-kanban.tsx",
           "src/components/ui/app-sidebar.tsx",
@@ -380,7 +381,7 @@
       },
       {
         "className": "text-muted-foreground text-sm",
-        "occurrences": 25,
+        "occurrences": 28,
         "files": [
           "src/components/stories/app-form.stories.tsx",
           "src/components/stories/app-stepper.stories.tsx",
@@ -396,6 +397,20 @@
           "src/components/ui/tables/data-table/components/data-table-filter-inputs.tsx"
         ]
       },
+      {
+        "className": "text-d-muted-foreground text-sm",
+        "occurrences": 26,
+        "files": [
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/app-dialog.stories.tsx",
+          "src/components/stories/app-kanban.stories.tsx",
+          "src/components/stories/changelog.stories.tsx",
+          "src/components/stories/date-picker.stories.tsx",
+          "src/components/stories/input.stories.tsx",
+          "src/components/stories/toaster.stories.tsx",
+          "src/components/ui/secure-pdf-viewer.tsx"
+        ]
+      },
       {
         "className": "bg-muted rounded-md p-4",
         "occurrences": 20,
@@ -406,16 +421,17 @@
         ]
       },
       {
-        "className": "text-d-muted-foreground text-sm",
+        "className": "flex items-center justify-between",
         "occurrences": 19,
         "files": [
-          "src/components/stories/app-dialog.stories.tsx",
-          "src/components/stories/app-kanban.stories.tsx",
-          "src/components/stories/changelog.stories.tsx",
-          "src/components/stories/date-picker.stories.tsx",
-          "src/components/stories/input.stories.tsx",
-          "src/components/stories/toaster.stories.tsx",
-          "src/components/ui/secure-pdf-viewer.tsx"
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/data-table-utils-example.stories.tsx",
+          "src/components/stories/sidebar.stories.tsx",
+          "src/components/stories/switch.stories.tsx",
+          "src/components/ui/app-form.tsx",
+          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
+          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
+          "src/components/ui/tables/data-cross-table/editable-input.tsx"
         ]
       },
       {
@@ -437,16 +453,10 @@
         ]
       },
       {
-        "className": "flex items-center justify-between",
-        "occurrences": 15,
+        "className": "border-d-border bg-d-muted rounded-lg border p-4",
+        "occurrences": 14,
         "files": [
-          "src/components/stories/data-table-utils-example.stories.tsx",
-          "src/components/stories/sidebar.stories.tsx",
-          "src/components/stories/switch.stories.tsx",
-          "src/components/ui/app-form.tsx",
-          "src/components/ui/tables/data-cross-table/cell-editor-dialog.tsx",
-          "src/components/ui/tables/data-cross-table/data-cross-table.tsx",
-          "src/components/ui/tables/data-cross-table/editable-input.tsx"
+          "src/components/stories/app-form.stories.tsx"
         ]
       },
       {
@@ -456,13 +466,6 @@
           "src/components/stories/tabs.stories.tsx"
         ]
       },
-      {
-        "className": "border-d-border bg-d-muted rounded-lg border p-4",
-        "occurrences": 11,
-        "files": [
-          "src/components/stories/app-form.stories.tsx"
-        ]
-      },
       {
         "className": "flex w-[550px] flex-col gap-6",
         "occurrences": 10,
@@ -478,6 +481,16 @@
           "src/components/stories/tabs.stories.tsx"
         ]
       },
+      {
+        "className": "flex flex-col items-center gap-4",
+        "occurrences": 8,
+        "files": [
+          "src/components/stories/app-card.stories.tsx",
+          "src/components/stories/confirmer.stories.tsx",
+          "src/components/stories/input-selector.stories.tsx",
+          "src/components/stories/theme-switcher.stories.tsx"
+        ]
+      },
       {
         "className": "text-d-muted-foreground",
         "occurrences": 8,
@@ -523,15 +536,6 @@
           "src/components/stories/button.stories.tsx"
         ]
       },
-      {
-        "className": "flex flex-col items-center gap-4",
-        "occurrences": 7,
-        "files": [
-          "src/components/stories/confirmer.stories.tsx",
-          "src/components/stories/input-selector.stories.tsx",
-          "src/components/stories/theme-switcher.stories.tsx"
-        ]
-      },
       {
         "className": "flex flex-col items-center gap-2",
         "occurrences": 7,

package/dist/agent-docs/components/AppCard.md

@@ -0,0 +1,308 @@
+# AppCard
+
+## Overview
+
+Enhanced card component built on top of the base Card component. Provides a simplified prop-based API with built-in header, body, and footer sections, 10 visual variants (including semantic states), size control, loading skeleton state, and sub-components for advanced composition.
+
+---
+
+## Props
+
+### AppCardProps
+
+| Prop               | Type                                                                                                   | Default     | Description                                                         |
+| ------------------ | ------------------------------------------------------------------------------------------------------ | ----------- | ------------------------------------------------------------------- |
+| `title`            | `string \| React.ReactNode`                                                                            | `undefined` | Card title displayed in the header.                                 |
+| `description`      | `string \| React.ReactNode`                                                                            | `undefined` | Card description displayed below the title.                         |
+| `header`           | `React.ReactNode`                                                                                      | `undefined` | Custom header content; overrides `title` and `description`.         |
+| `body`             | `React.ReactNode`                                                                                      | `undefined` | Main content rendered inside CardContent.                           |
+| `children`         | `React.ReactNode`                                                                                      | `undefined` | Fallback body content when `body` is not provided.                  |
+| `actions`          | `React.ReactNode`                                                                                      | `undefined` | Right-aligned action elements inside the header.                    |
+| `footer`           | `React.ReactNode`                                                                                      | `undefined` | Footer content (typically action buttons).                          |
+| `variant`          | `AppCardVariant`                                                                                       | `"default"` | Visual variant of the card (see table below).                       |
+| `size`             | `"sm" \| "default" \| "lg" \| "none"`                                                                 | `undefined` | Controls internal padding via the base Card component.              |
+| `isLoading`        | `boolean`                                                                                              | `false`     | When true, renders skeleton placeholders instead of content.        |
+| `showHeaderBorder` | `boolean`                                                                                              | `false`     | Displays a border between the header and body sections.             |
+| `showFooterBorder` | `boolean`                                                                                              | `false`     | Displays a border between the body and footer sections.             |
+| `className`        | `string`                                                                                               | `undefined` | Additional classes for the card container.                          |
+| `headerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the header section.                          |
+| `bodyClassName`    | `string`                                                                                               | `undefined` | Additional classes for the body section.                            |
+| `footerClassName`  | `string`                                                                                               | `undefined` | Additional classes for the footer section.                          |
+
+### Variant Reference
+
+| Variant       | Description                                                                     |
+| ------------- | ------------------------------------------------------------------------------- |
+| `default`     | Standard card with background, border, and subtle shadow.                       |
+| `elevated`    | Stronger shadow for layered or floating layouts.                                |
+| `outlined`    | Transparent background with visible border; no shadow.                          |
+| `ghost`       | No border, no shadow — blends seamlessly into the background.                   |
+| `flat`        | Muted background, no border or shadow; ideal for nested card contexts.          |
+| `interactive` | Default styling with hover shadow and border accent; pointer cursor for clicks. |
+| `success`     | Green-tinted semantic card for positive states and confirmations.               |
+| `warning`     | Amber-tinted semantic card for cautionary messages and alerts.                  |
+| `destructive` | Red-tinted semantic card for errors, danger states, or critical notices.        |
+| `info`        | Primary-tinted semantic card for informational context and updates.             |
+
+### Size Reference
+
+| Size      | Description                                          |
+| --------- | ---------------------------------------------------- |
+| `sm`      | Reduced padding — compact cards and nested contexts. |
+| `default` | Standard padding (base Card default).                |
+| `lg`      | Spacious padding for prominent content areas.        |
+| `none`    | No default padding — apply custom padding manually.  |
+
+---
+
+## Exports
+
+- **AppCard**: Main card component.
+- **AppCardHeader**: Sub-component for composing custom headers.
+- **AppCardBody**: Sub-component for composing custom body sections.
+- **AppCardFooter**: Sub-component for composing custom footer sections.
+- **AppCardProps**: TypeScript interface for AppCard props.
+- **AppCardHeaderProps**: TypeScript interface for AppCardHeader props.
+- **AppCardVariant**: Union type of all 10 variant values.
+- **AppCardSize**: Union type of all size values (`"sm" | "default" | "lg" | "none"`).
+
+---
+
+## Behavior
+
+- **`body` vs `children`**: `body` takes precedence. When `body` is omitted, `children` is rendered inside `CardContent`. This allows both prop-based and JSX-composition patterns.
+- **`isLoading`**: When true, all section content is replaced with a skeleton showing a title placeholder, description placeholder, and three text-line placeholders. The skeleton respects the `size` and `variant` of the card.
+- **`size` passthrough**: The `size` prop is forwarded to the underlying `Card` component, controlling padding and gap via the base `paddingMap`.
+- **Conditional sections**: Header, body, and footer sections are only rendered if their corresponding props have content. An empty card renders just the card container.
+- **Header border**: Setting `showHeaderBorder` adds `border-b` to the `CardHeader`. When absent, the body section removes its top padding to maintain visual continuity.
+- **Footer border**: Setting `showFooterBorder` adds `border-b` to the body `CardContent`. When absent, the footer section removes its top padding.
+- **`interactive` variant**: Adds `cursor-pointer` and hover-triggered shadow/border transitions. The card is a `div`, so attach `onClick` directly to the `AppCard` element.
+- **Focus management**: The card container uses `focusRingWithin` from `designTokens`, so focusable elements inside the card display the system focus ring.
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+import { AppCard, Button } from "laif-ds";
+
+export function BasicCard() {
+  return (
+    <AppCard
+      title="Card Title"
+      description="Optional description providing additional context."
+      body={<p>Main content of the card.</p>}
+      footer={<Button>Primary Action</Button>}
+      className="w-[380px]"
+    />
+  );
+}
+```
+
+### Semantic Variants
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function SemanticCards() {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      <AppCard
+        title="Operation Successful"
+        description="All services are running normally."
+        body={<p>Deployment completed in 2m 34s.</p>}
+        variant="success"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Warning"
+        description="Storage usage is high."
+        body={<p>Disk at 80% capacity. Consider cleanup.</p>}
+        variant="warning"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Error Detected"
+        description="Service is not responding."
+        body={<p>Payment gateway returned a 503 error.</p>}
+        variant="destructive"
+        className="w-[300px]"
+      />
+      <AppCard
+        title="Update Available"
+        description="Version 2.4.0 is ready to install."
+        body={<p>Includes security patches and new features.</p>}
+        variant="info"
+        className="w-[300px]"
+      />
+    </div>
+  );
+}
+```
+
+### Interactive Card with onClick
+
+```tsx
+import { useState } from "react";
+import { AppCard } from "laif-ds";
+
+export function ClickableCard() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <AppCard
+      title="Clickable Card"
+      description="Click anywhere on the card"
+      body={<p className="text-sm">Clicked {count} times.</p>}
+      variant="interactive"
+      onClick={() => setCount((c) => c + 1)}
+      className="w-[320px]"
+    />
+  );
+}
+```
+
+### Loading State
+
+```tsx
+import { useState } from "react";
+import { AppCard, Button } from "laif-ds";
+
+export function LoadingCard() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button onClick={() => setLoading((v) => !v)}>Toggle Loading</Button>
+      <AppCard
+        title="Remote Data Card"
+        description="Loaded from external source"
+        body={<p>This is the real content.</p>}
+        footer={<Button>Action</Button>}
+        isLoading={loading}
+        className="w-[380px]"
+      />
+    </div>
+  );
+}
+```
+
+### Nested Flat Cards
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function NestedCards() {
+  return (
+    <AppCard
+      title="Parent Card"
+      description="Contains nested flat sub-cards"
+      body={
+        <div className="flex flex-col gap-3">
+          <AppCard
+            title="Nested Item A"
+            body={<p className="text-sm">Flat cards have no border or shadow.</p>}
+            variant="flat"
+            size="sm"
+          />
+          <AppCard
+            title="Nested Item B"
+            body={<p className="text-sm">Good for secondary content regions.</p>}
+            variant="flat"
+            size="sm"
+          />
+        </div>
+      }
+      className="w-[420px]"
+    />
+  );
+}
+```
+
+### Size Variants
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function SizeVariants() {
+  return (
+    <div className="flex flex-col gap-6 w-[400px]">
+      <AppCard
+        size="sm"
+        title="Size: Small"
+        description="Reduced padding for compact layouts"
+        body={<p>This card uses size="sm".</p>}
+      />
+      <AppCard
+        size="default"
+        title="Size: Default"
+        description="Standard padding"
+        body={<p>This card uses size="default".</p>}
+      />
+      <AppCard
+        size="lg"
+        title="Size: Large"
+        description="Spacious padding for prominent content"
+        body={<p>This card uses size="lg".</p>}
+      />
+    </div>
+  );
+}
+```
+
+### Children as Fallback Body
+
+```tsx
+import { AppCard } from "laif-ds";
+
+export function ChildrenCard() {
+  return (
+    <AppCard title="Card with Children" className="w-[380px]">
+      <p>This content is passed as children and rendered inside CardContent.</p>
+    </AppCard>
+  );
+}
+```
+
+### Advanced Composition with Sub-components
+
+```tsx
+import {
+  AppCard,
+  AppCardHeader,
+  AppCardBody,
+  AppCardFooter,
+  Button,
+  Badge,
+} from "laif-ds";
+
+export function ComposedCard() {
+  return (
+    <AppCard className="w-[380px]">
+      <AppCardHeader
+        title="Advanced Composition"
+        description="Using sub-components directly"
+        actions={<Badge>New</Badge>}
+      />
+      <AppCardBody>
+        <p>Full control over each section independently.</p>
+      </AppCardBody>
+      <AppCardFooter>
+        <Button className="w-full">Confirm</Button>
+      </AppCardFooter>
+    </AppCard>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **`body` vs `children` precedence**: If both are provided, `body` wins. Use `body` for the prop-based API and `children` when composing JSX naturally.
+- **`interactive` variant and accessibility**: The `interactive` variant only adds visual affordances (hover states, pointer cursor). For keyboard accessibility on a clickable card, consider wrapping with an `<a>` or `<button>` using `asChild` on a child component, or ensure the card content includes a focusable element.
+- **Sub-components**: `AppCardHeader`, `AppCardBody`, and `AppCardFooter` wrap the base `CardHeader`, `CardContent`, and `CardFooter` respectively. Use them when the prop API of `AppCard` is insufficient for your layout needs.
+- **vs Card**: Use `AppCard` for most card use cases — it handles conditional rendering and spacing automatically. Use the base `Card` and its sub-components directly when you need maximum layout control with no abstraction overhead.
+- **Semantic variants and theming**: The semantic variant colors (`success`, `warning`, `destructive`, `info`) use CSS variable tokens that respond to light/dark mode automatically.