@lowdefy/blocks-antd 5.6.0 → 6.0.0

package/dist/blocks/Masonry/gallery.yaml

@@ -0,0 +1,989 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: 3 Columns (Default)
+  blocks:
+    - id: mas_3col
+      type: Masonry
+      properties:
+        columns: 3
+        gutter: 12
+      blocks:
+        - id: mas_3col_c1
+          type: Card
+          properties:
+            size: small
+            title: Revenue
+          blocks:
+            - id: mas_3col_c1_stat
+              type: Statistic
+              properties:
+                value: 128450
+                prefix: $
+        - id: mas_3col_c2
+          type: Card
+          properties:
+            size: small
+            title: Active Users
+          blocks:
+            - id: mas_3col_c2_stat
+              type: Statistic
+              properties:
+                value: 3842
+            - id: mas_3col_c2_p
+              type: Paragraph
+              properties:
+                content: '<span style="color:#52c41a">+12.5%</span> vs last month'
+        - id: mas_3col_c3
+          type: Card
+          properties:
+            size: small
+            title: Uptime
+          blocks:
+            - id: mas_3col_c3_stat
+              type: Statistic
+              properties:
+                value: 99.97
+                suffix: '%'
+        - id: mas_3col_c4
+          type: Card
+          properties:
+            size: small
+            title: Top Region
+          blocks:
+            - id: mas_3col_c4_tags
+              type: Box
+              layout:
+                gap: 8
+                wrap: wrap
+              blocks:
+                - id: mas_3col_c4_t1
+                  type: Tag
+                  properties:
+                    title: North America
+                    color: blue
+                - id: mas_3col_c4_t2
+                  type: Tag
+                  properties:
+                    title: Europe
+                    color: green
+                - id: mas_3col_c4_t3
+                  type: Tag
+                  properties:
+                    title: Asia Pacific
+                    color: orange
+        - id: mas_3col_c5
+          type: Card
+          properties:
+            size: small
+            title: Conversion Rate
+          blocks:
+            - id: mas_3col_c5_stat
+              type: Statistic
+              properties:
+                value: 4.2
+                suffix: '%'
+            - id: mas_3col_c5_p1
+              type: Paragraph
+              properties:
+                content: Target is 5%. Campaigns are underperforming in APAC.
+            - id: mas_3col_c5_p2
+              type: Progress
+              properties:
+                percent: 84
+
+- title: 2 Columns
+  blocks:
+    - id: mas_2col
+      type: Masonry
+      properties:
+        columns: 2
+        gutter: 12
+      blocks:
+        - id: mas_2col_c1
+          type: Card
+          properties:
+            size: small
+            title: Notifications
+          blocks:
+            - id: mas_2col_c1_alert
+              type: Alert
+              properties:
+                type: success
+                showIcon: true
+                message: Deployment completed
+            - id: mas_2col_c1_alert2
+              type: Alert
+              properties:
+                type: warning
+                showIcon: true
+                message: Disk usage at 85%
+        - id: mas_2col_c2
+          type: Card
+          properties:
+            size: small
+            title: Quick Stats
+          blocks:
+            - id: mas_2col_c2_stat
+              type: Statistic
+              properties:
+                value: 1024
+                suffix: requests/s
+
+- title: Responsive Columns
+  blocks:
+    - id: mas_resp
+      type: Masonry
+      properties:
+        columns:
+          xs: 1
+          sm: 2
+          md: 3
+        gutter: 12
+      blocks:
+        - id: mas_resp_c1
+          type: Card
+          properties:
+            size: small
+            title: xs:1 sm:2 md:3
+          blocks:
+            - id: mas_resp_c1_p
+              type: Paragraph
+              properties:
+                content: Resize browser to see columns change at each breakpoint.
+        - id: mas_resp_c2
+          type: Card
+          properties:
+            size: small
+            title: Responsive
+          blocks:
+            - id: mas_resp_c2_stat
+              type: Statistic
+              properties:
+                value: 3
+                suffix: breakpoints
+        - id: mas_resp_c3
+          type: Card
+          properties:
+            size: small
+            title: Mobile
+          blocks:
+            - id: mas_resp_c3_p
+              type: Paragraph
+              properties:
+                content: Stacks to a single column on small screens.
+
+- title: Wide Gutter (32px)
+  blocks:
+    - id: mas_gutter
+      type: Masonry
+      properties:
+        columns: 2
+        gutter: 32
+      blocks:
+        - id: mas_gutter_c1
+          type: Card
+          properties:
+            size: small
+            title: Spacious
+          blocks:
+            - id: mas_gutter_c1_p
+              type: Paragraph
+              properties:
+                content: 32px gap between items in both directions.
+        - id: mas_gutter_c2
+          type: Card
+          properties:
+            size: small
+            title: Airy Layout
+          blocks:
+            - id: mas_gutter_c2_stat
+              type: Statistic
+              properties:
+                value: 32
+                suffix: px
+
+- title: Mixed Gutter [32, 8]
+  blocks:
+    - id: mas_hv
+      type: Masonry
+      properties:
+        columns: 2
+        gutter:
+          - 32
+          - 8
+      blocks:
+        - id: mas_hv_c1
+          type: Card
+          properties:
+            size: small
+            title: Wide Horizontal
+          blocks:
+            - id: mas_hv_c1_p
+              type: Paragraph
+              properties:
+                content: 32px horizontal, 8px vertical. Compact rows, wide columns.
+        - id: mas_hv_c2
+          type: Card
+          properties:
+            size: small
+            title: Tight Vertical
+          blocks:
+            - id: mas_hv_c2_stat
+              type: Statistic
+              properties:
+                value: 8
+                suffix: px vertical
+        - id: mas_hv_c3
+          type: Card
+          properties:
+            size: small
+            title: Third
+          blocks:
+            - id: mas_hv_c3_p
+              type: Paragraph
+              properties:
+                content: Notice the asymmetric spacing.
+
+- title: Sequential Rendering
+  blocks:
+    - id: mas_seq
+      type: Masonry
+      properties:
+        columns: 3
+        gutter: 12
+        sequential: true
+      blocks:
+        - id: mas_seq_c1
+          type: Card
+          properties:
+            size: small
+            title: '1'
+          blocks:
+            - id: mas_seq_c1_p
+              type: Paragraph
+              properties:
+                content: Items fill left-to-right in source order instead of shortest column.
+        - id: mas_seq_c2
+          type: Card
+          properties:
+            size: small
+            title: '2'
+          blocks:
+            - id: mas_seq_c2_p
+              type: Paragraph
+              properties:
+                content: Second item.
+        - id: mas_seq_c3
+          type: Card
+          properties:
+            size: small
+            title: '3'
+          blocks:
+            - id: mas_seq_c3_p
+              type: Paragraph
+              properties:
+                content: Third item.
+            - id: mas_seq_c3_p2
+              type: Paragraph
+              properties:
+                content: Taller card — order still preserved.
+
+- title: Blue Theme Tokens
+  blocks:
+    - id: mas_blue
+      type: Masonry
+      properties:
+        columns: 2
+        gutter: 12
+        theme:
+          colorBorderSecondary: '#adc6ff'
+          borderRadiusLG: 16
+      blocks:
+        - id: mas_blue_c1
+          type: Card
+          properties:
+            size: small
+            title: Themed Card
+          blocks:
+            - id: mas_blue_c1_p
+              type: Paragraph
+              properties:
+                content: Theme tokens cascade to all child blocks within this Masonry.
+        - id: mas_blue_c2
+          type: Card
+          properties:
+            size: small
+            title: Rounded Corners
+          blocks:
+            - id: mas_blue_c2_stat
+              type: Statistic
+              properties:
+                value: 16
+                suffix: px radius
+
+- title: Warm Theme Tokens
+  blocks:
+    - id: mas_warm
+      type: Masonry
+      properties:
+        columns: 2
+        gutter: 12
+        theme:
+          colorBorderSecondary: '#ffd591'
+          colorTextHeading: '#d46b08'
+          colorText: '#874d00'
+      blocks:
+        - id: mas_warm_c1
+          type: Card
+          properties:
+            size: small
+            title: Orange Palette
+          blocks:
+            - id: mas_warm_c1_p
+              type: Paragraph
+              properties:
+                content: Warm-toned cards using gold design tokens.
+        - id: mas_warm_c2
+          type: Card
+          properties:
+            size: small
+            title: Consistent
+          blocks:
+            - id: mas_warm_c2_p
+              type: Paragraph
+              properties:
+                content: Text, borders, and backgrounds all harmonized.
+
+- title: Tailwind Styled Container
+  blocks:
+    - id: mas_tw
+      type: Masonry
+      class:
+        element: bg-bg-layout p-6 rounded-xl
+      properties:
+        columns: 2
+        gutter: 12
+      blocks:
+        - id: mas_tw_c1
+          type: Card
+          properties:
+            size: small
+            title: Gray Background
+          blocks:
+            - id: mas_tw_c1_p
+              type: Paragraph
+              properties:
+                content: Tailwind classes on the element CSS key style the Masonry wrapper.
+        - id: mas_tw_c2
+          type: Card
+          properties:
+            size: small
+            title: Contrast
+          blocks:
+            - id: mas_tw_c2_p
+              type: Paragraph
+              properties:
+                content: White cards against gray create visual separation.
+
+- title: Slow Motion Tokens
+  blocks:
+    - id: mas_motion
+      type: Masonry
+      properties:
+        columns: 2
+        gutter: 12
+        theme:
+          motionDurationSlow: '2s'
+          motionDurationFast: '1s'
+          motionEaseOut: ease-in-out
+      blocks:
+        - id: mas_motion_c1
+          type: Card
+          properties:
+            size: small
+            title: 2s Transitions
+          blocks:
+            - id: mas_motion_c1_p
+              type: Paragraph
+              properties:
+                content: Resize browser to see slow item repositioning.
+        - id: mas_motion_c2
+          type: Card
+          properties:
+            size: small
+            title: Custom Easing
+          blocks:
+            - id: mas_motion_c2_p
+              type: Paragraph
+              properties:
+                content: ease-in-out instead of the default cubic-bezier.
+
+- title: Image Gallery
+  fullWidth: true
+  blocks:
+    - id: mas_gallery
+      type: Masonry
+      properties:
+        columns: 3
+        gutter: 12
+      blocks:
+        - id: mas_gallery_c1
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_gallery_img1
+                  type: Html
+                  properties:
+                    html: '<img alt="landscape" src="https://picsum.photos/seed/gallery1/400/300" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_gallery_c1_title
+              type: Title
+              properties:
+                content: Mountain Sunrise
+                level: 5
+            - id: mas_gallery_c1_p
+              type: Paragraph
+              properties:
+                content: A stunning view of the morning light breaking over the peaks.
+            - id: mas_gallery_c1_tags
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: mas_gallery_c1_t1
+                  type: Tag
+                  properties:
+                    title: Nature
+                    color: green
+                - id: mas_gallery_c1_t2
+                  type: Tag
+                  properties:
+                    title: Featured
+                    color: gold
+        - id: mas_gallery_c2
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_gallery_img2
+                  type: Html
+                  properties:
+                    html: '<img alt="cityscape" src="https://picsum.photos/seed/gallery2/400/500" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_gallery_c2_title
+              type: Title
+              properties:
+                content: City at Night
+                level: 5
+            - id: mas_gallery_c2_p
+              type: Paragraph
+              properties:
+                content: Urban skyline illuminated by thousands of city lights reflecting off the river below.
+        - id: mas_gallery_c3
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_gallery_img3
+                  type: Html
+                  properties:
+                    html: '<img alt="forest" src="https://picsum.photos/seed/gallery3/400/250" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_gallery_c3_title
+              type: Title
+              properties:
+                content: Autumn Forest
+                level: 5
+        - id: mas_gallery_c4
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_gallery_img4
+                  type: Html
+                  properties:
+                    html: '<img alt="ocean" src="https://picsum.photos/seed/gallery4/400/350" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_gallery_c4_title
+              type: Title
+              properties:
+                content: Ocean Waves
+                level: 5
+            - id: mas_gallery_c4_p
+              type: Paragraph
+              properties:
+                content: Crashing waves along the rocky coastline during golden hour.
+            - id: mas_gallery_c4_tags
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: mas_gallery_c4_t1
+                  type: Tag
+                  properties:
+                    title: Seascape
+                    color: blue
+        - id: mas_gallery_c5
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_gallery_img5
+                  type: Html
+                  properties:
+                    html: '<img alt="desert" src="https://picsum.photos/seed/gallery5/400/450" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_gallery_c5_title
+              type: Title
+              properties:
+                content: Desert Dunes
+                level: 5
+            - id: mas_gallery_c5_p
+              type: Paragraph
+              properties:
+                content: Rolling sand dunes stretching to the horizon under a clear blue sky. The patterns in the sand are shaped by the wind.
+
+- title: Team Directory
+  fullWidth: true
+  blocks:
+    - id: mas_team
+      type: Masonry
+      properties:
+        columns:
+          xs: 1
+          sm: 2
+          lg: 3
+        gutter: 16
+      blocks:
+        - id: mas_team_c1
+          type: Card
+          properties:
+            size: small
+            hoverable: true
+          blocks:
+            - id: mas_team_c1_row
+              type: Box
+              layout:
+                gap: 12
+                align: center
+              blocks:
+                - id: mas_team_c1_avatar
+                  type: Avatar
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    icon: AiOutlineUser
+                    size: 48
+                    color: '#fff'
+                    backgroundColor: '#1677ff'
+                - id: mas_team_c1_info
+                  type: Box
+                  layout:
+                    flex: 1 1 0
+                    direction: column
+                    gap: 2
+                  blocks:
+                    - id: mas_team_c1_name
+                      type: Title
+                      properties:
+                        content: Sarah Chen
+                        level: 5
+                    - id: mas_team_c1_role
+                      type: Paragraph
+                      properties:
+                        content: Lead Designer
+            - id: mas_team_c1_divider
+              type: Divider
+            - id: mas_team_c1_desc
+              type: Descriptions
+              properties:
+                size: small
+                column: 1
+                items:
+                  - label: Email
+                    value: sarah.chen@example.com
+                  - label: Location
+                    value: San Francisco, CA
+                  - label: Team
+                    value: Design Systems
+            - id: mas_team_c1_btn
+              type: Button
+              properties:
+                title: View Profile
+                color: primary
+                variant: outlined
+                block: true
+                size: small
+              events:
+                onClick:
+                  - id: mas_team_c1_msg
+                    type: DisplayMessage
+                    params:
+                      content: Viewing Sarah Chen's profile
+                      status: info
+        - id: mas_team_c2
+          type: Card
+          properties:
+            size: small
+            hoverable: true
+          blocks:
+            - id: mas_team_c2_row
+              type: Box
+              layout:
+                gap: 12
+                align: center
+              blocks:
+                - id: mas_team_c2_avatar
+                  type: Avatar
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    icon: AiOutlineUser
+                    size: 48
+                    color: '#fff'
+                    backgroundColor: '#52c41a'
+                - id: mas_team_c2_info
+                  type: Box
+                  layout:
+                    flex: 1 1 0
+                    direction: column
+                    gap: 2
+                  blocks:
+                    - id: mas_team_c2_name
+                      type: Title
+                      properties:
+                        content: Marcus Johnson
+                        level: 5
+                    - id: mas_team_c2_role
+                      type: Paragraph
+                      properties:
+                        content: Senior Backend Engineer
+            - id: mas_team_c2_divider
+              type: Divider
+            - id: mas_team_c2_desc
+              type: Descriptions
+              properties:
+                size: small
+                column: 1
+                items:
+                  - label: Email
+                    value: marcus.j@example.com
+                  - label: Location
+                    value: Austin, TX
+            - id: mas_team_c2_btn
+              type: Button
+              properties:
+                title: View Profile
+                color: primary
+                variant: outlined
+                block: true
+                size: small
+              events:
+                onClick:
+                  - id: mas_team_c2_msg
+                    type: DisplayMessage
+                    params:
+                      content: Viewing Marcus Johnson's profile
+                      status: info
+        - id: mas_team_c3
+          type: Card
+          properties:
+            size: small
+            hoverable: true
+          blocks:
+            - id: mas_team_c3_row
+              type: Box
+              layout:
+                gap: 12
+                align: center
+              blocks:
+                - id: mas_team_c3_avatar
+                  type: Avatar
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    icon: AiOutlineUser
+                    size: 48
+                    color: '#fff'
+                    backgroundColor: '#722ed1'
+                - id: mas_team_c3_info
+                  type: Box
+                  layout:
+                    flex: 1 1 0
+                    direction: column
+                    gap: 2
+                  blocks:
+                    - id: mas_team_c3_name
+                      type: Title
+                      properties:
+                        content: Priya Patel
+                        level: 5
+                    - id: mas_team_c3_role
+                      type: Paragraph
+                      properties:
+                        content: Product Manager
+            - id: mas_team_c3_divider
+              type: Divider
+            - id: mas_team_c3_desc
+              type: Descriptions
+              properties:
+                size: small
+                column: 1
+                items:
+                  - label: Email
+                    value: priya.p@example.com
+                  - label: Location
+                    value: London, UK
+                  - label: Team
+                    value: Product
+                  - label: Projects
+                    value: '12 active'
+            - id: mas_team_c3_btn
+              type: Button
+              properties:
+                title: View Profile
+                color: primary
+                variant: outlined
+                block: true
+                size: small
+              events:
+                onClick:
+                  - id: mas_team_c3_msg
+                    type: DisplayMessage
+                    params:
+                      content: Viewing Priya Patel's profile
+                      status: info
+
+- title: Product Catalog
+  fullWidth: true
+  blocks:
+    - id: mas_products
+      type: Masonry
+      class:
+        element: bg-bg-layout p-6 rounded-xl
+      properties:
+        columns:
+          xs: 1
+          sm: 2
+          md: 3
+          lg: 4
+        gutter: 16
+      blocks:
+        - id: mas_prod_c1
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_prod_img1
+                  type: Html
+                  properties:
+                    html: '<img alt="product" src="https://picsum.photos/seed/prod1/400/400" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_prod_c1_name
+              type: Title
+              properties:
+                content: Wireless Headphones
+                level: 5
+            - id: mas_prod_c1_price
+              type: Statistic
+              properties:
+                value: 79.99
+                prefix: $
+            - id: mas_prod_c1_tags
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: mas_prod_c1_t1
+                  type: Tag
+                  properties:
+                    title: Electronics
+                    color: blue
+                - id: mas_prod_c1_t2
+                  type: Tag
+                  properties:
+                    title: Best Seller
+                    color: red
+            - id: mas_prod_c1_btn
+              type: Button
+              properties:
+                title: Add to Cart
+                color: primary
+                variant: solid
+                block: true
+                size: small
+                icon: AiOutlineShoppingCart
+              events:
+                onClick:
+                  - id: mas_prod_c1_add
+                    type: DisplayMessage
+                    params:
+                      content: Wireless Headphones added to cart
+                      status: success
+        - id: mas_prod_c2
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_prod_img2
+                  type: Html
+                  properties:
+                    html: '<img alt="product" src="https://picsum.photos/seed/prod2/400/300" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_prod_c2_name
+              type: Title
+              properties:
+                content: Leather Notebook
+                level: 5
+            - id: mas_prod_c2_price
+              type: Statistic
+              properties:
+                value: 24.50
+                prefix: $
+            - id: mas_prod_c2_btn
+              type: Button
+              properties:
+                title: Add to Cart
+                color: primary
+                variant: solid
+                block: true
+                size: small
+                icon: AiOutlineShoppingCart
+              events:
+                onClick:
+                  - id: mas_prod_c2_add
+                    type: DisplayMessage
+                    params:
+                      content: Leather Notebook added to cart
+                      status: success
+        - id: mas_prod_c3
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_prod_img3
+                  type: Html
+                  properties:
+                    html: '<img alt="product" src="https://picsum.photos/seed/prod3/400/500" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_prod_c3_name
+              type: Title
+              properties:
+                content: Ceramic Mug Set
+                level: 5
+            - id: mas_prod_c3_desc
+              type: Paragraph
+              properties:
+                content: Handcrafted set of 4 ceramic mugs in earth-tone glazes. Dishwasher and microwave safe.
+            - id: mas_prod_c3_price
+              type: Statistic
+              properties:
+                value: 45.00
+                prefix: $
+            - id: mas_prod_c3_tags
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: mas_prod_c3_t1
+                  type: Tag
+                  properties:
+                    title: Home
+                    color: orange
+                - id: mas_prod_c3_t2
+                  type: Tag
+                  properties:
+                    title: New
+                    color: green
+            - id: mas_prod_c3_btn
+              type: Button
+              properties:
+                title: Add to Cart
+                color: primary
+                variant: solid
+                block: true
+                size: small
+                icon: AiOutlineShoppingCart
+              events:
+                onClick:
+                  - id: mas_prod_c3_add
+                    type: DisplayMessage
+                    params:
+                      content: Ceramic Mug Set added to cart
+                      status: success
+        - id: mas_prod_c4
+          type: Card
+          properties:
+            hoverable: true
+            size: small
+          slots:
+            cover:
+              blocks:
+                - id: mas_prod_img4
+                  type: Html
+                  properties:
+                    html: '<img alt="product" src="https://picsum.photos/seed/prod4/400/350" style="width:100%; display:block;" />'
+          blocks:
+            - id: mas_prod_c4_name
+              type: Title
+              properties:
+                content: Desk Lamp
+                level: 5
+            - id: mas_prod_c4_price
+              type: Statistic
+              properties:
+                value: 59.99
+                prefix: $
+            - id: mas_prod_c4_btn
+              type: Button
+              properties:
+                title: Add to Cart
+                color: primary
+                variant: solid
+                block: true
+                size: small
+                icon: AiOutlineShoppingCart
+              events:
+                onClick:
+                  - id: mas_prod_c4_add
+                    type: DisplayMessage
+                    params:
+                      content: Desk Lamp added to cart
+                      status: success