{
  "version": "2.6",
  "children": [
    {
      "type": "frame",
      "name": "Quick Actions Showcase",
      "width": 1440,
      "fill": "$bg-page",
      "layout": "vertical",
      "gap": 80,
      "padding": [80, 120],
      "children": [
        {
          "type": "frame",
          "id": "QuickActionsSection",
          "name": "Quick Actions Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "QuickActionsHeader",
              "name": "quickActionsSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QuickActionsBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "QuickActionsBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "QUICK ACTIONS",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "QuickActionsTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "POS Action Toolbar",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "QuickActionsExample",
              "name": "quickActionsExample",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QuickActionsBar",
                  "name": "Organism/QuickActions/Bar",
                  "reusable": true,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "padding": 16,
                  "gap": 12,
                  "children": [
                    {
                      "type": "frame",
                      "id": "QABtnNewOrder",
                      "name": "newOrderBtn",
                      "width": 100,
                      "height": 90,
                      "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnNewOrderIcon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
                        {"type": "text", "id": "QABtnNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnHold",
                      "name": "holdBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnHoldIcon", "width": 28, "height": 28, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnHoldText", "fill": "$text-secondary", "content": "Tạm giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnRecall",
                      "name": "recallBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {
                          "type": "frame",
                          "id": "QABtnRecallBadge",
                          "name": "badge",
                          "fill": "#EF4444",
                          "cornerRadius": 100,
                          "padding": [2, 6],
                          "position": "absolute",
                          "x": 70,
                          "y": 8,
                          "children": [
                            {"type": "text", "id": "QABtnRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
                          ]
                        },
                        {"type": "icon_font", "id": "QABtnRecallIcon", "width": 28, "height": 28, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnRecallText", "fill": "$text-secondary", "content": "Đơn chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnDiscount",
                      "name": "discountBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnDiscountIcon", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnDiscountText", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnCustomer",
                      "name": "customerBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnCustomerIcon", "width": 28, "height": 28, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnCustomerText", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnPrint",
                      "name": "printBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnPrintIcon", "width": 28, "height": 28, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnPrintText", "fill": "$text-secondary", "content": "In bill", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QABtnMore",
                      "name": "moreBtn",
                      "width": 100,
                      "height": 90,
                      "fill": "$bg-interactive",
                      "cornerRadius": 14,
                      "layout": "vertical",
                      "gap": 8,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QABtnMoreIcon", "width": 28, "height": 28, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"},
                        {"type": "text", "id": "QABtnMoreText", "fill": "$text-secondary", "content": "Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "type": "frame",
          "id": "QuickActionsVerticalSection",
          "name": "Quick Actions Vertical Section",
          "width": "fill_container",
          "layout": "vertical",
          "gap": 32,
          "children": [
            {
              "type": "frame",
              "id": "QAVerticalHeader",
              "name": "qaVerticalSectionHeader",
              "layout": "vertical",
              "gap": 16,
              "alignItems": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QAVerticalBadge",
                  "name": "shBadge",
                  "fill": "#FF5C0018",
                  "cornerRadius": 100,
                  "padding": [6, 14],
                  "children": [
                    {
                      "type": "text",
                      "id": "QAVerticalBadgeText",
                      "name": "badgeText",
                      "fill": "$orange-primary",
                      "content": "SIDEBAR ACTIONS",
                      "fontFamily": "Roboto",
                      "fontSize": 11,
                      "fontWeight": "500",
                      "letterSpacing": 2
                    }
                  ]
                },
                {
                  "type": "text",
                  "id": "QAVerticalTitle",
                  "name": "shTitle",
                  "fill": "$text-primary",
                  "content": "Vertical Action Sidebar",
                  "textAlign": "center",
                  "fontFamily": "Roboto",
                  "fontSize": 42,
                  "fontWeight": "normal",
                  "letterSpacing": -1
                }
              ]
            },
            {
              "type": "frame",
              "id": "QAVerticalExample",
              "name": "qaVerticalExample",
              "width": "fill_container",
              "fill": "$bg-surface",
              "cornerRadius": 16,
              "stroke": {"thickness": 1, "fill": "$border-subtle"},
              "padding": 40,
              "justifyContent": "center",
              "children": [
                {
                  "type": "frame",
                  "id": "QuickActionsSidebar",
                  "name": "Organism/QuickActions/Sidebar",
                  "reusable": true,
                  "width": 72,
                  "fill": "$bg-elevated",
                  "cornerRadius": 16,
                  "stroke": {"thickness": 1, "fill": "$border-default"},
                  "layout": "vertical",
                  "padding": 12,
                  "gap": 8,
                  "alignItems": "center",
                  "children": [
                    {
                      "type": "frame",
                      "id": "QASideNewOrder",
                      "name": "newOrderBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$orange-primary",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideNewOrderIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASideHold",
                      "name": "holdBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASideRecall",
                      "name": "recallBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASideDiscount",
                      "name": "discountBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASideCustomer",
                      "name": "customerBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASidePrint",
                      "name": "printBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASidePrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    },
                    {
                      "type": "frame",
                      "id": "QASideSpacer",
                      "name": "spacer",
                      "width": 1,
                      "height": "fill_container"
                    },
                    {
                      "type": "frame",
                      "id": "QASideSettings",
                      "name": "settingsBtn",
                      "width": 48,
                      "height": 48,
                      "fill": "$bg-interactive",
                      "cornerRadius": 12,
                      "justifyContent": "center",
                      "alignItems": "center",
                      "children": [
                        {"type": "icon_font", "id": "QASideSettingsIcon", "width": 22, "height": 22, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "variables": {
    "bg-elevated": {"type": "color", "value": "#1A1A1D"},
    "bg-interactive": {"type": "color", "value": "#2A2A2E"},
    "bg-page": {"type": "color", "value": "#0A0A0B"},
    "bg-surface": {"type": "color", "value": "#111113"},
    "border-default": {"type": "color", "value": "#2A2A2E"},
    "border-subtle": {"type": "color", "value": "#1F1F23"},
    "orange-primary": {"type": "color", "value": "#FF5C00"},
    "text-primary": {"type": "color", "value": "#FFFFFF"},
    "text-secondary": {"type": "color", "value": "#ADADB0"}
  }
}
