laif-ds 0.2.61 → 0.2.62

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/components/AppDialog.md

@@ -0,0 +1,271 @@
+# AppDialog
+
+## Overview
+
+Enhanced modal dialog component built on top of the base Dialog component. Provides a simplified API with built-in header, body, and footer sections, multiple size variants, and support for both controlled and uncontrolled usage patterns.
+
+---
+
+## Props
+
+### AppDialogProps
+
+| Prop               | Type                                          | Default      | Description                                   |
+| ------------------ | --------------------------------------------- | ------------ | --------------------------------------------- |
+| `trigger`          | `React.ReactNode`                             | `undefined`  | Element that triggers the dialog on click.    |
+| `title`            | `string \| React.ReactNode`                   | **required** | Dialog title displayed in the header.         |
+| `description`      | `string \| React.ReactNode`                   | `undefined`  | Dialog description displayed below the title. |
+| `footer`           | `React.ReactNode`                             | `undefined`  | Footer content (typically action buttons).    |
+| `size`             | `"sm" \| "default" \| "lg" \| "xl" \| "full"` | `"default"`  | Size variant of the dialog.                   |
+| `open`             | `boolean`                                     | `undefined`  | Controlled open state.                        |
+| `defaultOpen`      | `boolean`                                     | `undefined`  | Default open state for uncontrolled usage.    |
+| `onOpenChange`     | `(open: boolean) => void`                     | `undefined`  | Callback when open state changes.             |
+| `disabled`         | `boolean`                                     | `false`      | Whether to disable the trigger.               |
+| `asChild`          | `boolean`                                     | `false`      | Whether to use asChild pattern for trigger.   |
+| `preventClose`     | `"overlay" \| "all"`                          | `undefined`  | Prevent closing via overlay or all methods.   |
+| `triggerClassName` | `string`                                      | `undefined`  | Additional className for the trigger wrapper. |
+| `contentClassName` | `string`                                      | `undefined`  | Additional className for the dialog content.  |
+| `headerClassName`  | `string`                                      | `undefined`  | Additional className for the dialog header.   |
+| `bodyClassName`    | `string`                                      | `undefined`  | Additional className for the dialog body.     |
+| `footerClassName`  | `string`                                      | `undefined`  | Additional className for the dialog footer.   |
+
+### Size Variants
+
+| Size      | Dimensions                         |
+| --------- | ---------------------------------- |
+| `sm`      | 5/12 width and height              |
+| `default` | 7/12 width and height              |
+| `lg`      | 9/12 width and height              |
+| `xl`      | 11/12 width and height             |
+| `full`    | Full viewport (no rounded corners) |
+
+---
+
+## Exports
+
+- **AppDialog**: Main dialog component.
+- **AppDialogClose**: Re-export of DialogClose for closing the dialog programmatically.
+
+---
+
+## Behavior
+
+- **Responsive**: On small screens (`max-sm`), the dialog takes full viewport.
+- **Scrollable body**: Content in the body section scrolls if it exceeds available space.
+- **Close button**: Built-in close button in the header (top-right).
+- **Border separators**: Automatic borders between header/body and body/footer when content exists.
+- **Focus management**: Inherits Radix Dialog focus trapping behavior.
+
+---
+
+## Examples
+
+### Basic Usage
+
+```tsx
+import { AppDialog, Button } from "laif-ds";
+
+export function BasicAppDialog() {
+  return (
+    <AppDialog
+      title="Dialog Title"
+      description="Optional description text."
+      trigger={<Button>Open Dialog</Button>}
+      asChild
+    >
+      <p>Dialog content goes here.</p>
+    </AppDialog>
+  );
+}
+```
+
+### With Footer Actions
+
+```tsx
+import { AppDialog, AppDialogClose, Button } from "laif-ds";
+
+export function DialogWithFooter() {
+  return (
+    <AppDialog
+      title="Confirm Action"
+      description="Are you sure you want to proceed?"
+      trigger={<Button>Open Dialog</Button>}
+      footer={
+        <>
+          <AppDialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </AppDialogClose>
+          <AppDialogClose asChild>
+            <Button>Confirm</Button>
+          </AppDialogClose>
+        </>
+      }
+      asChild
+    >
+      <p>This action cannot be undone.</p>
+    </AppDialog>
+  );
+}
+```
+
+### Controlled Dialog
+
+```tsx
+import { useState } from "react";
+import { AppDialog, Button } from "laif-ds";
+
+export function ControlledDialog() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Dialog</Button>
+
+      <AppDialog
+        open={open}
+        onOpenChange={setOpen}
+        title="Controlled Dialog"
+        description="This dialog is controlled externally."
+        footer={<Button onClick={() => setOpen(false)}>Close</Button>}
+      >
+        <p>The dialog state is managed by the parent component.</p>
+      </AppDialog>
+    </>
+  );
+}
+```
+
+### Size Variants
+
+```tsx
+import { AppDialog, Button } from "laif-ds";
+
+export function SizeVariants() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <AppDialog
+        title="Small Dialog"
+        size="sm"
+        trigger={<Button variant="outline">Small</Button>}
+        asChild
+      >
+        <p>Small dialog content.</p>
+      </AppDialog>
+
+      <AppDialog
+        title="Default Dialog"
+        size="default"
+        trigger={<Button variant="outline">Default</Button>}
+        asChild
+      >
+        <p>Default dialog content.</p>
+      </AppDialog>
+
+      <AppDialog
+        title="Large Dialog"
+        size="lg"
+        trigger={<Button variant="outline">Large</Button>}
+        asChild
+      >
+        <p>Large dialog content.</p>
+      </AppDialog>
+
+      <AppDialog
+        title="Extra Large Dialog"
+        size="xl"
+        trigger={<Button variant="outline">Extra Large</Button>}
+        asChild
+      >
+        <p>Extra large dialog content.</p>
+      </AppDialog>
+
+      <AppDialog
+        title="Full Dialog"
+        size="full"
+        trigger={<Button variant="outline">Full</Button>}
+        asChild
+      >
+        <p>Full screen dialog content.</p>
+      </AppDialog>
+    </div>
+  );
+}
+```
+
+### With Form
+
+```tsx
+import { useState } from "react";
+import { AppDialog, AppDialogClose, Button, Input, Label } from "laif-ds";
+
+export function DialogWithForm() {
+  const [open, setOpen] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle form submission
+    setOpen(false);
+  };
+
+  return (
+    <AppDialog
+      open={open}
+      onOpenChange={setOpen}
+      title="Edit Profile"
+      description="Update your profile information."
+      trigger={<Button>Edit Profile</Button>}
+      footer={
+        <>
+          <AppDialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </AppDialogClose>
+          <Button type="submit" onClick={handleSubmit}>
+            Save
+          </Button>
+        </>
+      }
+      asChild
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="Your name" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="Your email" />
+        </div>
+      </form>
+    </AppDialog>
+  );
+}
+```
+
+### Disabled Trigger
+
+```tsx
+import { AppDialog, Button } from "laif-ds";
+
+export function DisabledDialog() {
+  return (
+    <AppDialog
+      title="Disabled Dialog"
+      trigger={<Button disabled>Cannot Open</Button>}
+      disabled
+      asChild
+    >
+      <p>This content won't be accessible.</p>
+    </AppDialog>
+  );
+}
+```
+
+---
+
+## Notes
+
+- **Use `asChild`**: When passing a Button or other interactive element as trigger, set `asChild={true}` to avoid nesting buttons.
+- **AppDialogClose**: Use this component to create buttons that close the dialog. Wrap with `asChild` when using custom elements.
+- **Scrolling content**: The body section automatically handles overflow with scrolling.
+- **Accessibility**: Title is rendered as an `h5` heading; description uses caption typography.
+- **vs Dialog**: Use `AppDialog` for simpler use cases with consistent header/body/footer layout. Use base `Dialog` for more complex custom layouts.

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

@@ -46,6 +46,7 @@ type ColumnMeta = {
     | "list_single_select"
     | "list_multi_select"
     | "other";
+  headerLabel?: string;
   sortable?: boolean;
   filterable?: boolean;
   searchable?: boolean;
@@ -57,7 +58,7 @@ type ColumnMeta = {
 Notes:
 
 - `id` must match the field key used for filtering/sorting.
-- Header should be a simple string (not JSX) for proper filtering/sorting UI.
+- If `header` is a `ReactNode` (e.g. `header: () => <div>Nome</div>`), set `meta.headerLabel` to provide a stable text label for sorting/filtering/column-visibility UI.
 - Filtering nested accessors (e.g., `"user.name"`) is not supported.
 
 ---
@@ -69,7 +70,9 @@ Notes:
 - **Operators**: Full operator set per type, including `eq_null`/`n_eq_null`, list operators (`array_overlap`, `n_array_overlap`), date/time before/after, checked/unchecked.
 - **Sorting**: Multi-column (limited by `maxSortedColumns`).
 - **Selection**: Integrated checkbox column when `checkable`.
-- **Column visibility**: Columns can start hidden via `initialState.columnVisibility` and be toggled from the eye icon popover in the toolbar.
+- **Column visibility**: Columns can start hidden via `initialState.columnVisibility` and be toggled from the eye icon popover in the toolbar (supports drag-and-drop reordering).
+- **Non-hideable columns**: Set `enableHiding: false` on a column to prevent it from being hidden.
+- **Custom JSX headers**: Use `meta.headerLabel` when `header` is a ReactNode to provide a stable text label for menus.
 - **Pinning**: `meta.pinned` supports left/right pinned columns.
 - **Pagination**: Auto page size from container height; respects `disableAutoPageSize`.
 - **Loading**: Skeleton rows adapt to viewport height (no hardcoded length).
@@ -275,6 +278,74 @@ export function TableWithHiddenColumns({ data }: { data: Person[] }) {
 }
 ```
 
+### Non-hideable columns
+
+If a column must always stay visible, set `enableHiding: false` on the column definition.
+
+```tsx
+import type { ColumnDef } from "@tanstack/react-table";
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: "name",
+    header: "Nome",
+    meta: { type: "string", sortable: true, searchable: true },
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+    enableHiding: false,
+    meta: { type: "string", searchable: true },
+  },
+];
+
+export function TableWithNonHideableColumn({ data }: { data: Person[] }) {
+  return <DataTable columns={columns} data={data} />;
+}
+```
+
+### Checkbox selection column (`checkable`)
+
+When `checkable` is enabled, the DataTable adds a left checkbox column for row selection. This column is not hideable and not draggable in the column visibility popover.
+
+```tsx
+export function TableCheckable({ data }: { data: Person[] }) {
+  return <DataTable columns={columns} data={data} checkable />;
+}
+```
+
+### Drag-and-drop reordering
+
+You can reorder columns by opening the column visibility popover (eye icon) and dragging items (grip icon). The order is managed internally via table `columnOrder` state.
+
+```tsx
+export function TableWithReordering({ data }: { data: Person[] }) {
+  return <DataTable columns={columns} data={data} />;
+}
+```
+
+### ReactNode headers + `meta.headerLabel`
+
+If you use a `ReactNode` header, set `meta.headerLabel` so that sorting/filtering/visibility menus can show a readable label.
+
+```tsx
+import type { ColumnDef } from "@tanstack/react-table";
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: "name",
+    header: () => <div>Nome</div>,
+    meta: {
+      type: "string",
+      headerLabel: "Nome",
+      sortable: true,
+      filterable: true,
+      searchable: true,
+    },
+  },
+];
+```
+
 ### Utility recipes (pinning, list options, quick filters)
 
 ```tsx

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

@@ -23,6 +23,7 @@ This document provides a complete mapping of all components available in the lai
 ## UI Components
 
 ### Form & Input Components
+
 - **AppForm** - Dynamic form component with multiple field types support
 - **AppRadioGroup** - Enhanced radio group with card and icon support
 - **AsyncSelect** - Select component with asynchronous data loading capabilities
@@ -41,6 +42,7 @@ This document provides a complete mapping of all components available in the lai
 - **TextArea** - Multi-line text input field
 
 ### Layout & Structure Components
+
 - **Accordion** - Collapsible content panels for organizing information hierarchically
 - **AppSidebar** - Application sidebar navigation component
 - **AppStepper** - Step-by-step progress indicator for multi-step processes
@@ -56,8 +58,10 @@ This document provides a complete mapping of all components available in the lai
 - **Tabs** - Tabbed interface for organizing content
 
 ### Overlay & Dialog Components
+
 - **Alert** - Display important messages and notifications to users
 - **AlertDialog** - Modal dialog for critical confirmations and warnings
+- **AppDialog** - Enhanced modal dialog with built-in header, body, footer sections and size variants
 - **Command** - Command palette for keyboard-driven navigation
 - **Confirmer** - Confirmation dialog for destructive actions
 - **ContextMenu** - Right-click context menu component
@@ -71,6 +75,7 @@ This document provides a complete mapping of all components available in the lai
 - **Tooltip** - Contextual information displayed on hover
 
 ### Data Display Components
+
 - **Avatar** - User profile image display with fallback initials
 - **Badge** - Small status indicator or label for highlighting information
 - **DataCrossTable** - Cross-tabulation data display component
@@ -81,6 +86,7 @@ This document provides a complete mapping of all components available in the lai
 - **Typo** - Typography component for consistent text styling
 
 ### Content & Media Components
+
 - **AppEditor** - Rich text editor component for content creation
 - **AudioVisualizer** - Audio waveform visualization component
 - **Calendar** - Date selection and display component
@@ -96,6 +102,7 @@ This document provides a complete mapping of all components available in the lai
 - **ShikiHighlighter** - Code syntax highlighter using Shiki
 
 ### Messaging & Communication
+
 - **Chat** - Complete chat interface component
 - **ChatMessage** - Individual message display within chat interfaces
 - **MessageInput** - Text input specifically designed for messaging
@@ -103,12 +110,14 @@ This document provides a complete mapping of all components available in the lai
 - **PromptSuggestions** - Suggestion chips for prompt input
 
 ### Navigation Components
+
 - **Button** - Primary interactive element for user actions
 - **NavigationMenu** - Navigation menu with dropdown support
 - **ThemeSwitcher** - Component for switching between light/dark themes
 - **WeeklyCalendar** - Week-view calendar component
 
 ### Utility & Feedback Components
+
 - **Skeleton** - Loading placeholder component with animation
 - **Sonner** - Toast notification system
 - **Spinner** - Loading spinner indicator

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as l, jsxs as a } from "react/jsx-runtime";
+import { cva as D } from "../../node_modules/class-variance-authority/dist/index.js";
+import { Button as C } from "./button.js";
+import { Dialog as b, DialogTrigger as y, DialogContent as z, DialogHeader as j, DialogClose as A, DialogFooter as B } from "./dialog.js";
+import { Typo as u } from "./typo.js";
+import { cn as s } from "../../lib/utils.js";
+const T = D(
+  [
+    "flex flex-col justify-between gap-2 w-full h-dvh max-w-[initial] p-6",
+    "max-sm:rounded-none max-sm:px-2 max-sm:py-3 max-sm:min-w-full max-sm:min-h-full max-sm:w-full max-sm:h-full max-sm:max-w-full max-sm:max-h-full"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-w-5/12 min-h-5/12 w-5/12 h-5/12 max-w-5/12 max-h-5/12",
+        default: "min-w-7/12 min-h-7/12 w-7/12 h-7/12 max-w-7/12 max-h-7/12",
+        lg: "min-w-9/12 min-h-9/12 w-9/12 h-9/12 max-w-9/12 max-h-9/12",
+        xl: "min-w-11/12 min-h-11/12 w-11/12 h-11/12 max-w-11/12 max-h-11/12",
+        full: "min-w-full min-h-full w-full h-full max-w-full max-h-full rounded-none"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function E({
+  children: o,
+  trigger: m,
+  title: n,
+  description: e,
+  footer: i,
+  size: d = "default",
+  open: f,
+  defaultOpen: c,
+  onOpenChange: r,
+  triggerClassName: x,
+  headerClassName: w,
+  bodyClassName: p,
+  footerClassName: v,
+  disabled: t = !1,
+  asChild: g = !1,
+  preventClose: V,
+  ...h
+}) {
+  const N = f !== void 0;
+  return t ? /* @__PURE__ */ l("div", { className: x, children: m }) : /* @__PURE__ */ a(
+    b,
+    {
+      open: N ? f : void 0,
+      defaultOpen: c,
+      onOpenChange: r,
+      children: [
+        m && /* @__PURE__ */ l(
+          y,
+          {
+            asChild: g,
+            className: x,
+            disabled: t,
+            children: m
+          }
+        ),
+        /* @__PURE__ */ a(
+          z,
+          {
+            ...h,
+            className: s(
+              T({
+                size: d
+              }),
+              h.className
+            ),
+            showCloseButton: !1,
+            children: [
+              /* @__PURE__ */ a(j, { className: s("gap-1", w), children: [
+                /* @__PURE__ */ a("div", { className: "flex w-full flex-row items-start gap-2", children: [
+                  /* @__PURE__ */ l(u, { variant: "h5", className: "flex flex-1", children: n }),
+                  /* @__PURE__ */ l(A, { asChild: !0, children: /* @__PURE__ */ l(
+                    C,
+                    {
+                      iconLeft: "X",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "size-7",
+                      onClick: () => r?.(!1)
+                    }
+                  ) })
+                ] }),
+                e && /* @__PURE__ */ l(
+                  u,
+                  {
+                    variant: "caption",
+                    className: "text-d-secondary-foreground flex flex-1",
+                    children: e
+                  }
+                )
+              ] }),
+              o && /* @__PURE__ */ l(
+                "div",
+                {
+                  className: s(
+                    "border-d-border flex min-h-0 w-full flex-1 flex-col gap-2 overflow-auto py-2",
+                    (!!n || !!e) && "border-t",
+                    !!i && "border-b",
+                    p
+                  ),
+                  children: o
+                }
+              ),
+              i && /* @__PURE__ */ l(B, { className: v, children: i })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  E as AppDialog,
+  A as AppDialogClose,
+  E as default
+};