@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/input-blocks/pagination.md

@@ -60,8 +60,6 @@ blocks:
 
 **Small size:**
 
-**Large size:**
-
 ```yaml
 - id: size_default_label
   type: Markdown
@@ -80,36 +78,6 @@ blocks:
   properties:
     total: 100
     size: small
-- id: size_large_label
-  type: Markdown
-  properties:
-    content: "**Large size:**"
-- id: size_large
-  type: Pagination
-  properties:
-    total: 100
-    size: large
-```
-
-```yaml
-- id: align_center
-  type: Pagination
-  properties:
-    total: 100
-    align: center
-- id: align_end
-  type: Pagination
-  properties:
-    total: 100
-    align: end
-```
-
-```yaml
-- id: less_items
-  type: Pagination
-  properties:
-    total: 500
-    showLessItems: true
 ```
 
 **Simple (default size):**
@@ -138,19 +106,17 @@ blocks:
     size: small
 ```
 
-**Default format:**
+**Boolean (default format):**
 
 **Custom string:**
 
-**Hidden:**
-
 **Show total (small):**
 
 ```yaml
 - id: show_total_bool_label
   type: Markdown
   properties:
-    content: "**Default format:**"
+    content: "**Boolean (default format):**"
 - id: show_total_bool
   type: Pagination
   properties:
@@ -165,15 +131,6 @@ blocks:
   properties:
     total: 85
     showTotal: 85 results found
-- id: show_total_hidden_label
-  type: Markdown
-  properties:
-    content: "**Hidden:**"
-- id: show_total_hidden
-  type: Pagination
-  properties:
-    total: 85
-    showTotal: false
 - id: show_total_small_label
   type: Markdown
   properties:
@@ -500,26 +457,19 @@ blocks:
 
 ```yaml
 - id: with_label_default
-  type: Label
+  type: Pagination
   properties:
     title: Page Navigation
-  blocks:
-    - id: with_label_default_pagination
-      type: Pagination
-      properties:
-        total: 100
+    total: 100
 - id: with_label_inline
-  type: Label
+  type: Pagination
   properties:
     title: Results
-    inline: true
-    span: 6
-  blocks:
-    - id: with_label_inline_pagination
-      type: Pagination
-      properties:
-        total: 200
-        showTotal: true
+    total: 200
+    showTotal: true
+    label:
+      inline: true
+      span: 6
 ```
 
 **Custom background and padding:**
@@ -550,7 +500,7 @@ blocks:
   type: Pagination
   style:
     .element:
-      border: "1px solid #d9d9d9"
+      border: 1px solid
       borderRadius: 8
       padding: 12
       display: flex
@@ -683,12 +633,9 @@ blocks:
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `total` | integer | `100` | Total number of items to be displayed in pagination. |
-| `size` | string | `"default"` | Pagination element size. Enum: `small`, `default`, `large`. |
-| `align` | string | `"start"` | Horizontal alignment of the pagination. Enum: `start`, `center`, `end`. |
-| `responsive` | boolean | `false` | Switch to the small size on narrow screens. Only applies when size is not set. |
-| `showLessItems` | boolean | `false` | Show fewer page number items around the current page. |
+| `size` | string | `"default"` | Pagination element size. Enum: `small`, `default`. |
 | `simple` | boolean | `false` | Use simplified pagination display. |
-| `showTotal` | boolean \| string \| object | `true` | Show the item range and total, such as "1-10 of 100 items". Set false to hide it, a string to show custom text, or a function that receives the total and the range. |
+| `showTotal` | boolean \| string \| object | `false` | Show pagination total number and range if boolean, or define a custom string or function to display. |
 | `showSizeChanger` | boolean | `false` | Determine whether to show page size select, it will be true when total > 50. |
 | `showQuickJumper` | boolean | `false` | Determine whether you can jump to pages directly. |
 | `pageSizeOptions` | array | `[10,20,30,40]` | Specify the page size changer options. |
@@ -698,10 +645,8 @@ blocks:
 | `theme.itemBg` | string | `"#ffffff"` | Background color for pagination items. |
 | `theme.itemSize` | number | `32` | Size of pagination items. |
 | `theme.itemSizeSM` | number | `24` | Size of pagination items in small mode. |
-| `theme.itemSizeLG` | number | `40` | Size of pagination items in large mode. |
 | `theme.itemActiveBg` | string | `"#ffffff"` | Background color for the active pagination item. |
-| `theme.itemActiveColor` | string | `"#1677ff"` | Text color for the active pagination item. |
-| `theme.itemActiveColorHover` | string | `"#4096ff"` | Text color for the active pagination item on hover. |
+| `theme.itemActiveColor` | string | - | Text color for the active pagination item. |
 | `theme.itemActiveColorDisabled` | string | `"rgba(0,0,0,0.25)"` | Text color for the active item when disabled. |
 | `theme.itemActiveBgDisabled` | string | `"rgba(0,0,0,0.15)"` | Background color for the active item when disabled. |
 | `theme.itemLinkBg` | string | `"#ffffff"` | Background color for prev/next link items. |
@@ -730,6 +675,5 @@ blocks:
 | --- | --- |
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Pagination element. |
-| `/item` | Each page number item. |
 
 No slots defined.

package/content/input-blocks/paragraphinput.md

@@ -12,8 +12,8 @@ Editable paragraph text with copyable and ellipsis support.
       - id: set_default
         type: SetState
         params:
-          basic_default: Click anywhere in this paragraph to edit it in place. Press Enter
-            or click away to save, or Escape to cancel.
+          basic_default: Click the edit icon to start editing this paragraph. Changes are
+            saved when you press Enter or click away.
 - id: basic_editable_object
   type: ParagraphInput
   properties:
@@ -39,10 +39,6 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     editable: true
-- id: basic_placeholder
-  type: ParagraphInput
-  properties:
-    placeholder: Add a description
 - id: basic_long
   type: ParagraphInput
   properties:
@@ -53,11 +49,11 @@ Editable paragraph text with copyable and ellipsis support.
         type: SetState
         params:
           basic_long: This is a longer paragraph to demonstrate how ParagraphInput handles
-            multi-line content. When you click the text, it becomes editable in
-            place, with the caret where you clicked. The editable paragraph is
-            useful for inline content editing scenarios where users should be
-            able to quickly update descriptive text without navigating to a
-            separate form.
+            multi-line content. When you click the edit icon, a text area
+            appears allowing you to modify all of the text. The editable
+            paragraph is useful for inline content editing scenarios where users
+            should be able to quickly update descriptive text without navigating
+            to a separate form.
 ```
 
 ```yaml
@@ -71,7 +67,7 @@ Editable paragraph text with copyable and ellipsis support.
       - id: set_default
         type: SetState
         params:
-          tooltip_short: Hover over this paragraph to see a short tooltip.
+          tooltip_short: Hover over the edit icon to see a short tooltip.
 - id: tooltip_descriptive
   type: ParagraphInput
   properties:
@@ -82,7 +78,7 @@ Editable paragraph text with copyable and ellipsis support.
       - id: set_default
         type: SetState
         params:
-          tooltip_descriptive: Hover over this paragraph to see a descriptive tooltip.
+          tooltip_descriptive: Hover over the edit icon to see a descriptive tooltip.
 - id: tooltip_instructional
   type: ParagraphInput
   properties:
@@ -101,20 +97,20 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     editable:
-      icon: highlight
+      icon: AiOutlineHighlight
       tooltip: Highlight to edit
   events:
     onMount:
       - id: set_default
         type: SetState
         params:
-          icon_highlight: An edit icon is shown only when one is set. This one uses the
-            highlight icon.
+          icon_highlight: This paragraph uses a highlight icon instead of the default edit
+            icon.
 - id: icon_form
   type: ParagraphInput
   properties:
     editable:
-      icon: SquarePen
+      icon: AiOutlineForm
       tooltip: Open editor
   events:
     onMount:
@@ -126,7 +122,7 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     editable:
-      icon: edit
+      icon: AiOutlineEdit
       tooltip: Edit paragraph
   events:
     onMount:
@@ -139,7 +135,7 @@ Editable paragraph text with copyable and ellipsis support.
   properties:
     editable:
       icon:
-        name: edit
+        name: AiOutlineEdit
         color: "#1677ff"
       tooltip: Edit in blue
   events:
@@ -214,8 +210,8 @@ Editable paragraph text with copyable and ellipsis support.
         type: SetState
         params:
           autosize_true: This paragraph uses autoSize true so the text area automatically
-            grows to fit the content when editing. Click the text to see the
-            text area expand.
+            grows to fit the content when editing. Try clicking the edit icon to
+            see the text area expand.
 - id: autosize_min_max
   type: ParagraphInput
   properties:
@@ -291,7 +287,7 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     editable:
-      icon: edit
+      icon: AiOutlineEdit
       tooltip: Edit this paragraph
       maxLength: 150
       autoSize:
@@ -308,7 +304,7 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     editable:
-      icon: highlight
+      icon: AiOutlineHighlight
       tooltip: Highlight to edit (max 100 chars)
       maxLength: 100
   events:
@@ -693,7 +689,7 @@ Editable paragraph text with copyable and ellipsis support.
   type: ParagraphInput
   properties:
     copyable:
-      icon: Files
+      icon: AiOutlineSnippets
       tooltips:
         - Copy snippet
         - Snippet copied!
@@ -709,8 +705,8 @@ Editable paragraph text with copyable and ellipsis support.
   properties:
     copyable:
       icon:
-        - copy
-        - check
+        - AiOutlineCopy
+        - AiOutlineCheck
       tooltips:
         - Copy text
         - Text copied!
@@ -726,7 +722,7 @@ Editable paragraph text with copyable and ellipsis support.
   properties:
     copyable:
       icon:
-        name: copy
+        name: AiOutlineCopy
         color: "#1677ff"
       tooltips:
         - Copy
@@ -747,8 +743,8 @@ Editable paragraph text with copyable and ellipsis support.
     copyable:
       text: Custom text for clipboard
       icon:
-        - copy
-        - check
+        - AiOutlineCopy
+        - AiOutlineCheck
       tooltips:
         - Copy custom text
         - Custom text copied!
@@ -1064,8 +1060,8 @@ Editable paragraph text with copyable and ellipsis support.
         params:
           default_long: This is a longer default value that spans multiple words and
             demonstrates how ParagraphInput handles pre-populated content. Users
-            can click the text to modify it. The paragraph displays the full
-            content by default.
+            can click the edit icon to modify this text. The paragraph displays
+            the full content by default.
 - id: default_with_styles
   type: ParagraphInput
   properties:
@@ -1464,7 +1460,7 @@ Editable paragraph text with copyable and ellipsis support.
     type: success
     strong: true
     editable:
-      icon: edit
+      icon: AiOutlineEdit
       tooltip: Edit this paragraph
       maxLength: 300
       autoSize: true
@@ -1549,7 +1545,7 @@ Editable paragraph text with copyable and ellipsis support.
     type: danger
     strong: true
     editable:
-      icon: edit
+      icon: AiOutlineEdit
       tooltip: Edit error message
       maxLength: 500
       autoSize:
@@ -1557,8 +1553,8 @@ Editable paragraph text with copyable and ellipsis support.
         maxRows: 10
     copyable:
       icon:
-        - copy
-        - check
+        - AiOutlineCopy
+        - AiOutlineCheck
       tooltips:
         - Copy error details
         - Error details copied!
@@ -1615,21 +1611,12 @@ Editable paragraph text with copyable and ellipsis support.
 | `copyable.tooltips` | string \| array | - | Tooltip text, can be an array or two strings for before and after clicked. |
 | `delete` | boolean | `false` | Apply deleted (strikethrough) style. |
 | `disabled` | boolean | `false` | Apply disabled style. |
-| `editable` | boolean \| object | `true` | Allow editing the paragraph in place. Click the text, or focus it and press Enter, to edit. Enter saves, Escape cancels. Provide an object for editable settings. |
-| `editable.icon` | string \| object | - | Show an edit icon button after the text, like `edit`. No icon is shown by default, since clicking the text edits it. |
-| `editable.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `editable.icon.color` | string | - | Icon color. |
-| `editable.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `editable.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `editable.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `editable.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `editable.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `editable.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `editable.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
-| `editable.tooltip` | string | - | Tooltip text, shown on the edit icon, or on the text when no icon is set. |
+| `editable` | boolean \| object | `true` | Allow paragraph editing when true, editable settings can be provided with editable object. |
+| `editable.icon` | string \| object | - | Edit icon. |
+| `editable.tooltip` | string | - | Edit tooltip text. |
 | `editable.editing` | boolean | - | Control editing state. |
 | `editable.maxLength` | number | - | Max length of text area input. |
-| `editable.autoSize` | boolean \| object | `true` | Grow the text area with its content when editing. Set false for a single scrolling line. |
+| `editable.autoSize` | boolean \| object | `false` | Auto size the text area height when editing. |
 | `editable.autoSize.minRows` | number | - | Minimum number of rows for the text area. |
 | `editable.autoSize.maxRows` | number | - | Maximum number of rows for the text area. |
 | `ellipsis` | boolean \| object | `false` | Display ellipsis when text overflows a single line. |
@@ -1638,13 +1625,12 @@ Editable paragraph text with copyable and ellipsis support.
 | `ellipsis.suffix` | string | - | Suffix of ellipses content. |
 | `italic` | boolean | `false` | Apply italic style. |
 | `mark` | boolean | `false` | Apply marked (highlighted) style. |
-| `placeholder` | string | `"Empty"` | Muted text shown when the paragraph is empty and editable. |
 | `strong` | boolean | `false` | Apply strong (bold) style. |
 | `type` | string | `"default"` | Additional types. Don't specify for default. Enum: `success`, `default`, `secondary`, `warning`, `danger`. |
 | `underline` | boolean | `false` | Apply underline style. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design typography tokens](https://ant.design/components/typography#design-token). |
-| `theme.titleMarginBottom` | string \| number | `"0.5em"` | Margin bottom for title elements, as a CSS length or a number of pixels. |
-| `theme.titleMarginTop` | string \| number | `"1.2em"` | Margin top for title elements, as a CSS length or a number of pixels. |
+| `theme.titleMarginBottom` | string | `"0.5em"` | Margin bottom for title elements. |
+| `theme.titleMarginTop` | string | `"1.2em"` | Margin top for title elements. |
 | `theme.colorText` | string | - | Default text color. |
 | `theme.colorTextSecondary` | string | - | Text color for secondary type. |
 | `theme.colorSuccess` | string | - | Text color for success type. |

package/content/input-blocks/passwordinput.md

@@ -61,29 +61,6 @@ Password input with visibility toggle.
     title: No Placeholder
 ```
 
-```yaml
-- id: password_prefix_icon
-  type: PasswordInput
-  properties:
-    title: Prefix Icon
-    prefixIcon: lock
-    placeholder: Password
-- id: password_allow_clear
-  type: PasswordInput
-  properties:
-    title: Allow Clear
-    allowClear: true
-    prefixIcon: lock
-    maxLength: 32
-    placeholder: Up to 32 characters
-- id: password_underlined
-  type: PasswordInput
-  properties:
-    title: Underlined
-    variant: underlined
-    prefix: PIN
-```
-
 ```yaml
 - id: disabled_empty
   type: PasswordInput
@@ -356,7 +333,7 @@ Password input with visibility toggle.
       properties:
         title: Username
         placeholder: Enter your username
-        prefixIcon: user
+        prefixIcon: AiOutlineUser
     - id: login_password
       type: PasswordInput
       required: true
@@ -370,7 +347,7 @@ Password input with visibility toggle.
       type: Button
       properties:
         title: Sign In
-        icon: login
+        icon: AiOutlineLogin
         type: primary
         size: large
         block: true
@@ -420,7 +397,7 @@ Password input with visibility toggle.
       type: Button
       properties:
         title: Update Password
-        icon: lock
+        icon: AiOutlineLock
         type: primary
         size: large
         block: true
@@ -435,52 +412,26 @@ Password input with visibility toggle.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `allowClear` | boolean | `false` | Allow the user to clear their input. |
 | `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
 | `bordered` | boolean | `true` | Whether or not the input has a border style. Deprecated, use variant instead. |
 | `disabled` | boolean | `false` | Disable the block if true. |
-| `maxLength` | integer | - | The max number of input characters. |
 | `placeholder` | string | - | Placeholder text inside the block before user types input. |
-| `prefix` | string | - | Prefix text for the block, priority over prefixIcon. |
-| `prefixIcon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon to prefix the password input. |
-| `prefixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `prefixIcon.color` | string | - | Icon color. |
-| `prefixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `prefixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `prefixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `prefixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `prefixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `prefixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `prefixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
 | `label` | object | - | Label properties. |
-| `label.xs` | object | - | Label width on extra small screens (below 576px) when the label is not inline. |
-| `label.xs.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.sm` | object | - | Label width on small screens (576px and up) when the label is not inline. Also applies below 576px unless `xs` is set. |
-| `label.sm.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.md` | object | - | Label width on medium screens (768px and up) when the label is not inline. Overrides `span`. |
-| `label.md.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.lg` | object | - | Label width on large screens (992px and up) when the label is not inline. |
-| `label.lg.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xl` | object | - | Label width on extra large screens (1200px and up) when the label is not inline. |
-| `label.xl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
-| `label.xxl` | object | - | Label width on extra extra large screens (1600px and up) when the label is not inline. |
-| `label.xxl.span` | number | - | Label width in columns, out of 24. The content takes the remaining columns. |
 | `label.align` | string | `"left"` | Align label left or right when inline. Enum: `left`, `right`. |
 | `label.colon` | boolean | `true` | Append label with colon. |
 | `label.extra` | string | - | Extra text to display beneath the content - supports html. |
 | `label.title` | string | - | Label title - supports html. |
 | `label.tooltip` | string \| object | - | Help tooltip shown via an icon beside the label. A string sets the tooltip text (supports html), or an object to also customize the icon and color. Use the block's onTooltipClick event to respond to clicks on the icon. |
 | `label.tooltip.title` | string | - | Tooltip text shown on hover - supports html. |
-| `label.tooltip.icon` | string | `"help"` | Icon name to show beside the label: a semantic name like `help`, a Lucide icon name like `CircleQuestionMark`, or a set-qualified name like `tabler:HelpCircle`. |
+| `label.tooltip.icon` | string | `"AiOutlineQuestionCircle"` | Name of the icon to show beside the label. |
 | `label.tooltip.color` | string | - | Color of the tooltip icon. |
-| `label.span` | number | - | Label width in columns, out of 24, on medium screens (768px) and up when the label is not inline. The content takes the remaining columns. |
+| `label.span` | number | - | Label inline span. |
 | `label.disabled` | boolean | `false` | Hide input label. |
 | `label.hasFeedback` | boolean | `true` | Display feedback extra from validation, this does not disable validation. |
 | `label.inline` | boolean | `false` | Render input and label inline. |
-| `label.wrap` | boolean | `false` | Wrap long label text onto multiple lines when the label is inline. Labels above their input always wrap. |
 | `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
-| `variant` | string | - | Input visual variant. The deprecated bordered: false takes precedence and renders the input as 'borderless'. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
+| `variant` | string | - | Input visual variant. When set, takes precedence over bordered. Enum: `outlined`, `filled`, `borderless`. |
 | `visibilityToggle` | boolean | `true` | Show password visibility toggle button. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design input tokens](https://ant.design/components/input#design-token). |
 | `theme.activeBorderColor` | string | `"#1677ff"` | Border color when the input is active (focused). |
@@ -502,9 +453,6 @@ Password input with visibility toggle.
 | `theme.hoverBorderColor` | string | `"#4096ff"` | Border color when hovering over the input. |
 | `theme.hoverBg` | string | `"#ffffff"` | Background color when hovering over the input. |
 | `theme.activeBg` | string | `"#ffffff"` | Background color when the input is active (focused). |
-| `theme.inputFontSize` | number | `14` | Font size of the input text. |
-| `theme.inputFontSizeLG` | number | `16` | Font size of the input text for large inputs. |
-| `theme.inputFontSizeSM` | number | `14` | Font size of the input text for small inputs. |
 | `theme.paddingBlock` | number | `4` | Vertical padding of the input. |
 | `theme.paddingBlockLG` | number | `7` | Vertical padding for large inputs. |
 | `theme.paddingBlockSM` | number | `0` | Vertical padding for small inputs. |
@@ -517,7 +465,6 @@ Password input with visibility toggle.
 | --- | --- | --- |
 | `onBlur` | \- | Trigger action event occurs when text input loses focus. |
 | `onChange` | `{ value }` | Trigger action when text input is changed. |
-| `onClear` | \- | Trigger action when the clear button is clicked. |
 | `onFocus` | \- | Trigger action when text input gets focus. |
 | `onPressEnter` | \- | Trigger action when enter is pressed while text input is focused. |
 | `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
@@ -529,6 +476,5 @@ Password input with visibility toggle.
 | `/label` | The PasswordInput label. |
 | `/extra` | The PasswordInput extra content. |
 | `/feedback` | The PasswordInput validation feedback. |
-| `/prefixIcon` | The prefix icon in the PasswordInput. |
 
 No slots defined.