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

package/content/input-blocks/dateselector.md

@@ -41,13 +41,6 @@ Date picker with configurable format and disabled dates.
     variant: borderless
     label:
       disabled: true
-- id: variant_underlined
-  type: DateSelector
-  properties:
-    title: Underlined
-    variant: underlined
-    label:
-      disabled: true
 ```
 
 ```yaml
@@ -156,14 +149,14 @@ Date picker with configurable format and disabled dates.
   type: DateSelector
   properties:
     title: Clock Icon
-    suffixIcon: clock
+    suffixIcon: AiOutlineClockCircle
     label:
       disabled: true
 - id: icon_schedule
   type: DateSelector
   properties:
     title: Schedule Icon
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     label:
       disabled: true
 - id: icon_custom_color
@@ -171,7 +164,7 @@ Date picker with configurable format and disabled dates.
   properties:
     title: Custom Color Icon
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     label:
       disabled: true
@@ -180,48 +173,12 @@ Date picker with configurable format and disabled dates.
   properties:
     title: Heart Icon
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#ff4d4f"
     label:
       disabled: true
 ```
 
-```yaml
-- id: ds_prefix_icon
-  type: DateSelector
-  properties:
-    title: Prefix Icon
-    prefixIcon: clock
-    suffixIcon:
-      name: calendar
-      color: "#8c8c8c"
-- id: ds_prefix_text
-  type: DateSelector
-  properties:
-    title: Prefix Text
-    prefix: "From:"
-- id: ds_placement
-  type: DateSelector
-  properties:
-    title: Popup Opens Top Right
-    placement: topRight
-- id: ds_read_only
-  type: DateSelector
-  properties:
-    title: Pick From Calendar Only
-    inputReadOnly: true
-    label:
-      extra: The input is read-only, so touch devices do not open the keyboard.
-```
-
-```yaml
-- id: ds_show_week
-  type: DateSelector
-  properties:
-    title: Show Week Numbers
-    showWeek: true
-```
-
 ```yaml
 - id: disabled_default
   type: DateSelector
@@ -492,8 +449,7 @@ Date picker with configurable format and disabled dates.
 - id: style_element
   type: DateSelector
   style:
-    .element:
-      backgroundColor: var(--ant-color-primary-bg)
+    .element: null
   properties:
     title: Custom Background
     label:
@@ -578,7 +534,7 @@ Date picker with configurable format and disabled dates.
     placeholder: Select appointment date
     format: DD MMMM YYYY
     size: large
-    suffixIcon: CalendarDays
+    suffixIcon: AiOutlineSchedule
     showToday: true
     allowClear: true
     label:
@@ -603,7 +559,7 @@ Date picker with configurable format and disabled dates.
     placeholder: Select event date
     format: DD MMM YYYY
     suffixIcon:
-      name: calendar
+      name: AiOutlineCalendar
       color: "#1677ff"
     disabledDates:
       min: 2026-01-01
@@ -619,7 +575,7 @@ Date picker with configurable format and disabled dates.
     format: DD MMMM YYYY
     placeholder: Choose a special date...
     suffixIcon:
-      name: heart
+      name: AiOutlineHeart
       color: "#eb2f96"
     label:
       disabled: true
@@ -643,7 +599,7 @@ Date picker with configurable format and disabled dates.
         placeholder: Select event date
         format: DD MMMM YYYY
         size: large
-        suffixIcon: calendar
+        suffixIcon: AiOutlineCalendar
         label:
           extra: Choose the date you would like to attend.
         disabledDates:
@@ -654,20 +610,20 @@ Date picker with configurable format and disabled dates.
       properties:
         title: Full Name
         placeholder: Enter your full name
-        prefixIcon: user
+        prefixIcon: AiOutlineUser
     - id: applied2_event_email
       type: TextInput
       properties:
         title: Email Address
         placeholder: you@example.com
-        prefixIcon: mail
+        prefixIcon: AiOutlineMail
         label:
           extra: We will send your confirmation to this address.
     - id: applied2_event_register_btn
       type: Button
       properties:
         title: Register
-        icon: check
+        icon: AiOutlineCheck
         type: primary
         size: large
         block: true
@@ -691,14 +647,14 @@ Date picker with configurable format and disabled dates.
       properties:
         title: Display Name
         placeholder: Enter your display name
-        prefixIcon: user
+        prefixIcon: AiOutlineUser
     - id: applied3_date_of_birth
       type: DateSelector
       properties:
         title: Date of Birth
         placeholder: Select your date of birth
         format: DD MMMM YYYY
-        suffixIcon: calendar
+        suffixIcon: AiOutlineCalendar
         label:
           extra: Used to verify your age.
         disabledDates:
@@ -714,12 +670,12 @@ Date picker with configurable format and disabled dates.
       properties:
         title: Email Address
         placeholder: you@example.com
-        prefixIcon: mail
+        prefixIcon: AiOutlineMail
     - id: applied3_save_btn
       type: Button
       properties:
         title: Save Profile
-        icon: save
+        icon: AiOutlineSave
         type: primary
         size: large
         block: true
@@ -738,7 +694,7 @@ Date picker with configurable format and disabled dates.
 | `autoFocus` | boolean | `false` | Autofocus to the block on page load. |
 | `bordered` | boolean | `true` | Deprecated - use variant: 'borderless'. Whether or not the input has a border style. |
 | `disabled` | boolean | `false` | Disable the block if true. |
-| `variant` | string | `"outlined"` | Variant style of the input. Use 'borderless' instead of bordered: false. Enum: `outlined`, `filled`, `borderless`, `underlined`. |
+| `variant` | string | `"outlined"` | Variant style of the input. Use 'borderless' instead of bordered: false. Enum: `outlined`, `filled`, `borderless`. |
 | `disabledDates` | object | - | Disable specific dates so that they can not be chosen. |
 | `disabledDates.min` | string \| object | - | Disable all dates less than the minimum date. Can be a date string or a _date object. |
 | `disabledDates.max` | string \| object | - | Disable all dates greater than the maximum date. Can be a date string or a _date object. |
@@ -747,113 +703,60 @@ Date picker with configurable format and disabled dates.
 | `disabledDates.ranges.$.from` | string \| object | - | Start of the disabled range. |
 | `disabledDates.ranges.$.to` | string \| object | - | End of the disabled range. |
 | `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. |
 | `format` | string | - | Format in which to parse the date value, eg. "DD MMMM YYYY" will parse a date value of 1999-12-31 as "31 December 1999". The format has to conform to dayjs formats. Defaults to the active locale's date format, or "YYYY-MM-DD" when no locale is configured. |
-| `inputReadOnly` | boolean | `false` | Make the text input read-only, so a date can only be chosen from the calendar. This also stops the on-screen keyboard opening on touch devices. |
 | `placeholder` | string | - | Placeholder text inside the block before user types input. |
-| `placement` | string | `"bottomLeft"` | Position of the calendar popup relative to the input. Enum: `bottomLeft`, `bottomRight`, `topLeft`, `topRight`. |
-| `prefix` | string | - | Prefix text shown before the date in the input, 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 on the left-hand side of the date picker. |
-| `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. |
 | `presets` | array | - | Shortcuts listed next to the calendar to quickly select a date. Presets are re-evaluated every time the block config is evaluated, so operator based values like "_date: now" stay current. A preset is offered on the same terms as the calendar cells: a shortcut with nothing it may select is listed as disabled. |
 | `presets.$.label` | string | - | Text shown for the shortcut - supports html. |
 | `presets.$.value` | string \| number \| object | - | A date string, a timestamp, or a _date object. Dates are read as UTC, the same as the block value, so a fixed date like "2026-01-01" resolves to the same day in every timezone. A date relative to now is an instant, not a calendar date, so end a _dayjs chain with a format step to pin it to the local calendar: "_dayjs: [now, {format: YYYY-MM-DD}]". Without the format step the chain resolves to an instant, which can select the day before or after the current one, depending on the browser timezone and the time of day. |
 | `showToday` | boolean | `true` | Shows a button to easily select the current date if true. |
-| `showWeek` | boolean | `false` | Show the week number of each row in the calendar. |
 | `size` | string | `"default"` | Size of the block. Enum: `small`, `default`, `large`. |
-| `suffixIcon` | string \| object | `"calendar"` | 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 on right-hand side of the date picker. |
-| `suffixIcon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `suffixIcon.color` | string | - | Icon color. |
-| `suffixIcon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `suffixIcon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `suffixIcon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `suffixIcon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `suffixIcon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `suffixIcon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `suffixIcon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `suffixIcon` | string \| object | `"AiOutlineCalendar"` | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon on right-hand side of the date picker. |
 | `title` | string | - | Title to describe the input component, if no title is specified the block id is displayed - supports html. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design date-picker tokens](https://ant.design/components/date-picker#design-token). |
-| `theme.activeBg` | string | `"#ffffff"` | Background color of the input when the picker is active/focused. |
 | `theme.activeBorderColor` | string | - | Border color when the picker is active/focused. |
-| `theme.activeShadow` | string | `"0 0 0 2px rgba(5,145,255,0.1)"` | Shadow effect when the picker is active/focused. |
+| `theme.hoverBorderColor` | string | - | Border color when hovering over the picker. |
+| `theme.cellHoverBg` | string | `"rgba(0, 0, 0, 0.04)"` | Background color of calendar cell on hover. |
+| `theme.cellActiveWithRangeBg` | string | `"#e6f4ff"` | Background color of active cell within a range selection. |
+| `theme.addonBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of the footer addon area. |
+| `theme.zIndexPopup` | number | `1050` | Z-index of the date picker popup layer. |
+| `theme.timeColumnHeight` | number | `224` | Height of the time picker column. |
+| `theme.timeCellHeight` | number | `28` | Height of each cell in the time picker column. |
+| `theme.paddingBlock` | number | `4` | Vertical padding for the default size picker. |
+| `theme.paddingBlockSM` | number | `0` | Vertical padding for the small size picker. |
+| `theme.paddingBlockLG` | number | `7` | Vertical padding for the large size picker. |
+| `theme.paddingInline` | number | `11` | Horizontal padding for the default size picker. |
+| `theme.paddingInlineSM` | number | `7` | Horizontal padding for the small size picker. |
+| `theme.paddingInlineLG` | number | `11` | Horizontal padding for the large size picker. |
 | `theme.borderRadius` | number | `6` | Border radius of the picker input. |
-| `theme.borderRadiusLG` | number | `8` | Border radius for the large picker and popup panel. |
 | `theme.borderRadiusSM` | number | `4` | Border radius for the small picker. |
-| `theme.cellActiveWithRangeBg` | string | `"#e6f4ff"` | Background color of cells within the selected range. |
-| `theme.cellBgDisabled` | string | `"rgba(0,0,0,0.04)"` | Background color of disabled cells. |
-| `theme.cellHeight` | number | `24` | Height of a calendar cell. |
-| `theme.cellHoverBg` | string | `"rgba(0, 0, 0, 0.04)"` | Background color of a calendar cell on hover. |
-| `theme.cellHoverWithRangeBg` | string | `"#cbe0fd"` | Background color of cells within range on hover. |
-| `theme.cellRangeBorderColor` | string | `"#82b4f9"` | Border color of range selection cells. |
-| `theme.cellWidth` | number | `36` | Width of a calendar cell. |
-| `theme.colorBgContainer` | string | - | Background color of the picker input. |
-| `theme.colorBorder` | string | - | Border color of the picker input. |
-| `theme.colorPrimary` | string | - | Primary color used for the selected date and active states. |
-| `theme.colorText` | string | - | Text color of the picker input and calendar cells. |
-| `theme.colorTextPlaceholder` | string | - | Color of the placeholder text. |
+| `theme.borderRadiusLG` | number | `8` | Border radius for the large picker and popup panel. |
 | `theme.controlHeight` | number | `32` | Height of the picker input. |
-| `theme.controlHeightLG` | number | `40` | Height of the large picker input. |
 | `theme.controlHeightSM` | number | `24` | Height of the small picker input. |
-| `theme.errorActiveShadow` | string | `"0 0 0 2px rgba(255,38,5,0.06)"` | Shadow effect when the picker has error status and is focused. |
+| `theme.controlHeightLG` | number | `40` | Height of the large picker input. |
 | `theme.fontSize` | number | `14` | Font size of the picker input. |
-| `theme.fontSizeLG` | number | `16` | Font size for the large picker. |
 | `theme.fontSizeSM` | number | `14` | Font size for the small picker. |
-| `theme.hoverBg` | string | `"#ffffff"` | Background color of the input when hovering over the picker. |
-| `theme.hoverBorderColor` | string | - | Border color when hovering over the picker. |
+| `theme.fontSizeLG` | number | `16` | Font size for the large picker. |
 | `theme.lineWidth` | number | `1` | Border width of the picker input. |
-| `theme.paddingBlock` | number | `4` | Vertical padding for the default size picker. |
-| `theme.paddingBlockLG` | number | `7` | Vertical padding for the large size picker. |
-| `theme.paddingBlockSM` | number | `0` | Vertical padding for the small size picker. |
-| `theme.paddingInline` | number | `11` | Horizontal padding for the default size picker. |
-| `theme.paddingInlineLG` | number | `11` | Horizontal padding for the large size picker. |
-| `theme.paddingInlineSM` | number | `7` | Horizontal padding for the small size picker. |
-| `theme.presetsMaxWidth` | number | `200` | Maximum width of the presets list next to the calendar. |
-| `theme.presetsWidth` | number | `120` | Width of the presets list next to the calendar. |
-| `theme.timeCellHeight` | number | `28` | Height of a time cell in the time panel. |
-| `theme.timeColumnHeight` | number | `224` | Height of the time panel column. |
-| `theme.timeColumnWidth` | number | `56` | Width of the time panel column. |
-| `theme.warningActiveShadow` | string | `"0 0 0 2px rgba(255,215,5,0.1)"` | Shadow effect when the picker has warning status and is focused. |
-| `theme.withoutTimeCellHeight` | number | `66` | Height of the cells of the month, week, quarter, year and decade panels. |
-| `theme.zIndexPopup` | number | `1050` | Z-index of the picker popup layer. |
+| `theme.colorPrimary` | string | - | Primary color used for selected date and active states. |
+| `theme.colorBgContainer` | string | - | Background color of the picker input. |
+| `theme.colorText` | string | - | Text color of the picker input and calendar cells. |
+| `theme.colorBorder` | string | - | Border color of the picker input. |
+| `theme.colorTextPlaceholder` | string | - | Color of the placeholder text. |
 
 | Event | Event Data | Description |
 | --- | --- | --- |
-| `onBlur` | \- | Trigger actions when the picker loses focus. |
-| `onClear` | \- | Trigger actions when the clear button is clicked. |
-| `onFocus` | \- | Trigger actions when the picker gets focus. |
-| `onOpenChange` | `{ open }` | Trigger actions when the calendar popup opens or closes. |
 | `onChange` | `{ value }` | Trigger actions when selection is changed. |
 | `onTooltipClick` | \- | Trigger actions when the tooltip icon is clicked. |
 
@@ -865,7 +768,6 @@ Date picker with configurable format and disabled dates.
 | `/extra` | The DateSelector extra content. |
 | `/feedback` | The DateSelector validation feedback. |
 | `/popup` | The DateSelector popup. |
-| `/prefixIcon` | The prefix icon in the DateSelector. |
 | `/suffixIcon` | The suffix icon in the DateSelector. |
 
 No slots defined.